Enhancement: Shell / Shell Panel - content-behind should allow both fixed and detached shell-panels

[macandcheese]

Description

Consider the following app layout:

In the above, content-behind is used on calcite-shell. However, I need to manually add padding to the map container to account for the left-hand shell-panel's width. What I want is the right shell-panel to display as "detached", and the left shell-panel to display as "normal", but the center-panel content to render to the right of the left shell-panel, not behind it.

If I don't manually add that padding, the map renders "behind" the fixed left-hand shell-panel:

In addition, slots should be added to position content, such as "content-start"/"content-end".

Acceptance Criteria

• content-behind is usable in a way that allows a combination of detached and not-detached shell-panels.
• support slots for positioning content
  • add slots for displaying content at the top/start and bottom/end of the center Shell: Add slots for displaying content at the top/start and bottom/end of the center. #5668
  • allow slotted displayMode: float shell panels to position absolutely from [Shell / Shell Panel]: Allow slotted displayMode: float Shell Panels to position absolutely #7199

Relevant Info

• Explore removing the need for content-behind altogether.
• Related issues and context was provided from Shell: Add slots for displaying content at the top/start and bottom/end of the center. #5668 and calcite-input-number - input keeps increasing/decreasing if the mouseup happens outside the increment/decrement button #7188
• The estimate also takes into account the slot additions

Which Component

Example Use Case

[jcfranco]

Please add your planning poker estimate with ZenHub @macandcheese

[macandcheese]

@jcfranco did initial estimate but need input from @asangma

[geospatialem]

This came up via a user on Community where they would like to use the features widget in one panel, and a layer list on the other side of the UI.

There is a workaround, where the Maps SDK for JS view UI can be added, such as:

view.ui.add("customEl", "top-right");

Here's a sample for additional context: https://codepen.io/geospatialem/pen/oNQyaPM

Escalating the request as it should be a supported workflow in the future, potentially also removing the content-behind prop on calcite-shell. cc @macandcheese

[geospatialem]

Additional use case from #5668 is listed below from @bluespider42.

Also added the acceptance criteria to include context from #5668 and #7199 for consideration prior to closing out the related issues.

Include the ability to have a panel alligned with the bottom of the screen inside a shell-panel. This could be done to match the action-bar, which has a "bottom-actions" slot. So a shell-panel could have a "bottom-panels" slot or similar.

But with the action-bar you can have the action at the bottom of the action-bar, as a user I would expect this to open the panel at the bottom left-hand corner.: