Skip to content

Fix export toolbar overlapping control bar on narrow windows#19283

Open
shenglol wants to merge 2 commits intomainfrom
fix/export-toolbar-controlbar-overlap
Open

Fix export toolbar overlapping control bar on narrow windows#19283
shenglol wants to merge 2 commits intomainfrom
fix/export-toolbar-controlbar-overlap

Conversation

@shenglol
Copy link
Copy Markdown
Contributor

@shenglol shenglol commented Mar 28, 2026

Problem

The image export toolbar and the graph control bar overlap when the window width is too narrow. Both are absolutely positioned at top: 16px — the export overlay is centered (left: 50%; transform: translateX(-50%)) while the control bar is pinned top-right (right: 16px). On narrow viewports the wide export toolbar extends into the control bar area.

Fix

  • ExportOverlay: Replace center-transform positioning with left: 16px; right: 60px to create a safe zone that reserves space for the control bar. Use display: flex; justify-content: flex-end; overflow: hidden so the toolbar clips from the left when space is tight.
  • ExportToolbar: Add flex-shrink: 0; margin: 0 auto so the toolbar centers when there's enough space, but right-aligns (keeping Save As / Close visible) when the container overflows. Remove white-space: nowrap.
  • package.json: Register bicep.showVisualDesignerToSide command in the editor title navigation menu.

Behavior

  • Wide window: Export toolbar is centered, control bar is visible at top-right — no overlap.
  • Narrow window: Export toolbar right-aligns, left-side controls clip off, Save As and Close buttons remain visible, control bar remains accessible.

@github-actions
Copy link
Copy Markdown
Contributor

Test this change out locally with the following install scripts (Action run 23676069691)

VSCode
  • Mac/Linux
    bash <(curl -Ls https://aka.ms/bicep/nightly-vsix.sh) --run-id 23676069691
  • Windows
    iex "& { $(irm https://aka.ms/bicep/nightly-vsix.ps1) } -RunId 23676069691"
Azure CLI
  • Mac/Linux
    bash <(curl -Ls https://aka.ms/bicep/nightly-cli.sh) --run-id 23676069691
  • Windows
    iex "& { $(irm https://aka.ms/bicep/nightly-cli.ps1) } -RunId 23676069691"

@github-actions
Copy link
Copy Markdown
Contributor

Test this change out locally with the following install scripts (Action run 23676112861)

VSCode
  • Mac/Linux
    bash <(curl -Ls https://aka.ms/bicep/nightly-vsix.sh) --run-id 23676112861
  • Windows
    iex "& { $(irm https://aka.ms/bicep/nightly-vsix.ps1) } -RunId 23676112861"
Azure CLI
  • Mac/Linux
    bash <(curl -Ls https://aka.ms/bicep/nightly-cli.sh) --run-id 23676112861
  • Windows
    iex "& { $(irm https://aka.ms/bicep/nightly-cli.ps1) } -RunId 23676112861"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant