Skip to content

WorkspaceShell inspector rail overlaps content on mobile #1291

@willgriffin

Description

@willgriffin

Summary

When WorkspaceShell renders an inspectorRail without an open inspector at the mobile breakpoint (max-width: 960px), the rail is fixed to the right edge but .smrt-workspace-content and .smrt-workspace-topbar are reset to --smrt-ws-page-pad padding. Content can slide underneath the rail, so right-aligned controls become partially covered.

Reproduction

  1. Render WorkspaceShell with an inspectorRail snippet and showInspector={false}.
  2. Use a viewport at or below 960px wide.
  3. Place a right-aligned action in the page header/topbar.

Expected

The content/topbar reserve the rail width while the rail is visible and the inspector panel is closed.

Actual

The mobile media rule resets right padding to the normal page pad, leaving content under the fixed rail.

Notes

I hit this while moving local admin add/edit tools into the WorkspaceShell inspector rail. A local override confirmed that reserving calc(var(--smrt-ws-rail-width) + 1rem) fixes the overlap.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions