feat(command-bar): top align command bar to prevent jumping (#19018)

PostHog · Dec 1, 2023 · 79b28d0 · 79b28d0
1 parent 519415c
commit 79b28d0
Show file tree

Hide file tree

Showing 8 changed files with 10 additions and 8 deletions.
diff --git a/frontend/__snapshots__/components-command-bar--actions--dark.png b/frontend/__snapshots__/components-command-bar--actions--dark.png
diff --git a/frontend/__snapshots__/components-command-bar--actions--light.png b/frontend/__snapshots__/components-command-bar--actions--light.png
diff --git a/frontend/__snapshots__/components-command-bar--actions.png b/frontend/__snapshots__/components-command-bar--actions.png
diff --git a/frontend/__snapshots__/components-command-bar--shortcuts--dark.png b/frontend/__snapshots__/components-command-bar--shortcuts--dark.png
diff --git a/frontend/__snapshots__/components-command-bar--shortcuts--light.png b/frontend/__snapshots__/components-command-bar--shortcuts--light.png
diff --git a/frontend/__snapshots__/components-command-bar--shortcuts.png b/frontend/__snapshots__/components-command-bar--shortcuts.png
diff --git a/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png b/frontend/__snapshots__/scenes-app-sidepanels--side-panel-settings.png
diff --git a/frontend/src/lib/components/CommandBar/CommandBar.tsx b/frontend/src/lib/components/CommandBar/CommandBar.tsx
@@ -29,14 +29,16 @@ const CommandBarOverlay = forwardRef<HTMLDivElement, CommandBarOverlayProps>(fun
                 backdropFilter: 'blur(var(--modal-backdrop-blur))',
             }}
         >
-            <div
-                data-attr="command-bar"
-                className={`w-full ${
-                    barStatus === BarStatus.SHOW_SEARCH && 'h-160'
-                } max-w-lg bg-bg-3000 rounded overflow-hidden flex flex-col border shadow`}
-                ref={ref}
-            >
-                {children}
+            <div className="h-160 w-full max-w-lg">
+                <div
+                    data-attr="command-bar"
+                    className={`w-full ${
+                        barStatus === BarStatus.SHOW_SEARCH && 'h-160'
+                    } bg-bg-3000 rounded overflow-hidden border shadow`}
+                    ref={ref}
+                >
+                    {children}
+                </div>
             </div>
         </div>
     )