Option to shrink table beside information panel

[HaveSpacesuit]

Currently if there is an information panel displayed by a table, the rightmost columns of the table are covered up with no way to read them. (Or if the info panel is docked to the bottom, then the bottom rows are inaccessible.)

Perhaps we can add support to display the info panel beside the table, rather than on top of it. This would allow all information to still be accessible. For backward-compatibility, it could be an optional prop to enable this behavior.

[mayank99]

This is a somewhat contentious topic, but I'll try to explain.

The current situation: The InformationPanel component was hastily developed upon user request, so it has a lot of room for improvement. Right now, it doesn't account for outside clicks, doesn't do any focus management and doesn't even have any semantics. As a result:

• Mouse/touch users can't access some or most of the content outside the panel, depending on the screen size, panel size, browser zoom level, etc.
• Keyboard users will have to manually tab all the way into the panel. Worse even, they can focus elements that are obscured underneath the panel, which is a big accessibility violation.
• Screen-reader/AT users don't get any feedback that a panel is open (or that it is even a panel), and similarly have to manually navigate all the way into the panel.

The plan: Here's what I think is necessary to improve the panel.

• By default, the panel should behave like a modal dialog. It will have the same semantics as a dialog and will automatically move and trap focus inside the panel. The area outside the panel will be greyed out using a backdrop. Clicking on the backdrop will close the panel, because (as mentioned above) the current behavior is not a reliable way to make content outside the panel universally accessible.
• The panel should also be allowed to be used like a non-modal dialog, which keeps the content outside the panel accessible. The panel does not cover up the content outside it; instead it pushes/shrinks the main content to make space for the panel. Focus still moves into the panel when opened, but isn't trapped inside it (i.e. focus is allowed to escape the panel if needed).
• On very narrow widths, the panel should always be modal. On very high widths, the panel should always be non-modal. In between the two widths, the behavior can be controlled using modal={true} (default) or modal={false}.

(Note: None of this is set in stone, and we will discuss this further and get UX feedback before implementing, but you get the idea)