Feature #22336: Should be able to resize the right side panel - Arvados

All agreed upon points are implemented / addressed.
- Added nested splitter for details panel
- Added pseudoelement to enlarge clickable area on both left and right splitter (clickable area hangs into the center panel by 15px)
- Bumped path-to-regexp and nanoid for CVEs
Anything not implemented (discovered or discussed during work) has a follow-up story.
- none
Code is tested and passing, both automated and manual, what manual testing was done is described
- Manual testing and automated tests
Documentation has been updated.
- n/a
Behaves appropriately at the intended scale (describe intended scale).
- no change
Considered backwards and forwards compatibility issues between client and server.
- n/a
Follows our coding standards and GUI style guidelines.
- no significant change to UI appearance

Actions

Feedback:

In src/views-components/details-panel/details-panel.tsx, Line 37: 'DRAWER_WIDTH' is assigned a value but never used

I think 15px is actually too wide for the divider clickbox. What happens is that I'm moving my mouse around and my cursor suddenly changes to the divider icon and it's not immediately clear why. This also seems to have the effect of causing the splitter to jump unexpectedly; I click on the margin 10-15px left of the splitter, and as soon as I move my cursor even a pixel, the splitter jumps to that position.

At the thinnest width, when viewing any details panel with overflowing elements, the tab itself overflows as well. When viewing collection details in the details panel, both tabs (details and versions) fit into the space when viewing the versions tab, but overflow suddenly when switching to the details tab. The tabs should ideally all fit with their labels centered in all cases.

At the thinnest width, some of the property tags that should wrap to the next line don't. If you look at tordo-j7d0g-c4vq0mo36y98ba8, for example, "Fruit: Tomato", "Size: M", and "New: prop" are cut off. This looks like it only happens in cases where there are a large number of tags.

We might want to add the same grey border to the bottom of the details panel tabs that is on the project panel tabs. The amount of unbroken whitespace in the details panel tabs wasn't really noticeable before, but when fully embiggened, it looks unpolished beside the project panel.

In the Project Panel, the Data Explorer tabs aren't the same size. Again, this is unnoticeable when the details panel is at the default size, but when the tabs get smaller, it becomes clearer. In fact, it really only becomes noticeable when the main panel is <800 px wide or so.

This was preexisting, but the ResourceIcon-ResourceName-CloseButton at the top of the details panel doesn't line up with the tab label below it. It is unnoticeable at the panel's default width, but as the details panel is widened, the misalignment looks kinda shoddy.

These two are not directly related to resizing:

Currently, if the details panel is open and you navigate to another side panel category (My Favorites, Instance Types, Trash etc), the details panel defaults to a project view with no data. It would be nice to either have a placeholder details panel view for each of these categories (which should definitely be a new ticket) or have the details panel slide closed when navigating there (which might be jarring?)

For the Trash Panel, we need to decide to either not allow the details panel to be open or to add an Additional Details button to the context menu/toolbar. As it is, one can open the details panel and then navigate to Trash and get useful information by clicking on one of the table rows. This appears to be the only way to use the details panel in the Trash panel since we removed the "Additonal Info" button from the main content button.

Actions