diff --git a/src/vscode-bicep-ui/apps/visual-designer/src/features/export/ExportOverlay.tsx b/src/vscode-bicep-ui/apps/visual-designer/src/features/export/ExportOverlay.tsx index f9848b17aa2..da496438445 100644 --- a/src/vscode-bicep-ui/apps/visual-designer/src/features/export/ExportOverlay.tsx +++ b/src/vscode-bicep-ui/apps/visual-designer/src/features/export/ExportOverlay.tsx @@ -10,9 +10,17 @@ import { ExportToolbar } from "./ExportToolbar"; const $OverlayContainer = styled.div` position: absolute; top: 16px; - left: 50%; - transform: translateX(-50%); + left: 16px; + right: 60px; + display: flex; + justify-content: flex-end; + overflow: hidden; z-index: 200; + pointer-events: none; + + > * { + pointer-events: auto; + } `; /** diff --git a/src/vscode-bicep-ui/apps/visual-designer/src/features/export/ExportToolbar.tsx b/src/vscode-bicep-ui/apps/visual-designer/src/features/export/ExportToolbar.tsx index b8019b320e5..53f0d34fb51 100644 --- a/src/vscode-bicep-ui/apps/visual-designer/src/features/export/ExportToolbar.tsx +++ b/src/vscode-bicep-ui/apps/visual-designer/src/features/export/ExportToolbar.tsx @@ -30,12 +30,13 @@ const $Toolbar = styled.div` align-items: center; gap: 6px; padding: 6px 8px; + flex-shrink: 0; + margin: 0 auto; background-color: ${({ theme }) => theme.controlBar.background}; border: 1px solid ${({ theme }) => theme.controlBar.border}; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); backdrop-filter: blur(8px); - white-space: nowrap; `; /** Logical group of related controls. */ diff --git a/src/vscode-bicep/package.json b/src/vscode-bicep/package.json index 86b21729809..413890a29c9 100644 --- a/src/vscode-bicep/package.json +++ b/src/vscode-bicep/package.json @@ -361,6 +361,12 @@ "alt": "bicep.showVisualizer", "group": "navigation" }, + { + "command": "bicep.showVisualDesignerToSide", + "when": "editorLangId == bicep", + "alt": "bicep.showVisualDesigner", + "group": "navigation" + }, { "command": "bicep.showSourceFromVisualizer", "when": "bicepVisualizerFocus",