feat: Make the command bar responsive (#19411)

PostHog · Dec 20, 2023 · 63d73bc · 63d73bc
1 parent 6b9b72f
commit 63d73bc
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 12 deletions.
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--search--dark.png b/frontend/__snapshots__/components-command-bar--search--dark.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/src/lib/components/CommandBar/CommandBar.tsx b/frontend/src/lib/components/CommandBar/CommandBar.tsx
@@ -29,12 +29,12 @@ const CommandBarOverlay = forwardRef<HTMLDivElement, CommandBarOverlayProps>(fun
                 backdropFilter: 'blur(var(--modal-backdrop-blur))',
             }}
         >
-            <div className="h-160 w-full max-w-lg">
+            <div className="w-full h-full max-h-160 max-w-lg overflow-hidden">
                 <div
                     data-attr="command-bar"
                     className={`w-full ${
-                        barStatus === BarStatus.SHOW_SEARCH && 'h-160'
-                    } bg-bg-3000 rounded overflow-hidden border shadow`}
+                        barStatus === BarStatus.SHOW_SEARCH && 'h-full'
+                    } bg-bg-3000 rounded overflow-hidden border`}
                     ref={ref}
                 >
                     {children}

diff --git a/frontend/src/lib/components/CommandBar/SearchInput.tsx b/frontend/src/lib/components/CommandBar/SearchInput.tsx
@@ -1,4 +1,4 @@
-import { LemonInput } from '@posthog/lemon-ui'
+import { LemonButton, LemonInput } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { isMac } from 'lib/utils'
 import { forwardRef, Ref } from 'react'
@@ -11,7 +11,7 @@ import { searchBarLogic } from './searchBarLogic'
 export const SearchInput = forwardRef(function _SearchInput(_, ref: Ref<HTMLInputElement>): JSX.Element {
     const { currentTeam } = useValues(teamLogic)
     const { searchQuery } = useValues(searchBarLogic)
-    const { setSearchQuery } = useActions(searchBarLogic)
+    const { setSearchQuery, hideCommandBar } = useActions(searchBarLogic)
 
     const modifierKey = isMac() ? '⌘' : '^'
     const placeholder = currentTeam
@@ -25,7 +25,11 @@ export const SearchInput = forwardRef(function _SearchInput(_, ref: Ref<HTMLInpu
                 type="search"
                 className="CommandBar__input"
                 fullWidth
-                suffix={<KeyboardShortcut escape />}
+                suffix={
+                    <LemonButton onClick={() => hideCommandBar()} noPadding>
+                        <KeyboardShortcut escape />
+                    </LemonButton>
+                }
                 placeholder={placeholder}
                 autoFocus
                 value={searchQuery}

diff --git a/frontend/src/lib/components/CommandBar/SearchResults.tsx b/frontend/src/lib/components/CommandBar/SearchResults.tsx
@@ -1,4 +1,6 @@
+import clsx from 'clsx'
 import { useValues } from 'kea'
+import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
 
 import { DetectiveHog } from '../hedgehogs'
 import { searchBarLogic } from './searchBarLogic'
@@ -9,8 +11,13 @@ export const SearchResults = (): JSX.Element => {
     const { combinedSearchResults, combinedSearchLoading, activeResultIndex, keyboardResultIndex } =
         useValues(searchBarLogic)
 
+    const { ref, size } = useResizeBreakpoints({
+        0: 'small',
+        550: 'normal',
+    })
+
     return (
-        <div className="SearchResults grow">
+        <div className="SearchResults grow" ref={ref}>
             {!combinedSearchLoading && combinedSearchResults?.length === 0 ? (
                 <div className="w-full h-full flex flex-col items-center justify-center p-3">
                     <h3 className="mb-0 text-xl">No results</h3>
@@ -19,7 +26,12 @@ export const SearchResults = (): JSX.Element => {
                 </div>
             ) : (
                 <div className="overflow-hidden overscroll-contain flex h-full">
-                    <div className="border-r bg-bg-3000 overscroll-contain overflow-y-scroll grow-0 shrink-0 w-80">
+                    <div
+                        className={clsx(
+                            'border-r bg-bg-3000 overscroll-contain overflow-y-scroll grow-0 shrink-0 w-full',
+                            size !== 'small' && 'max-w-80'
+                        )}
+                    >
                         {combinedSearchLoading && (
                             <>
                                 <SearchResultSkeleton />
@@ -38,9 +50,11 @@ export const SearchResults = (): JSX.Element => {
                                 />
                             ))}
                     </div>
-                    <div className="p-2 grow">
-                        <SearchResultPreview />
-                    </div>
+                    {size !== 'small' ? (
+                        <div className="p-2 grow">
+                            <SearchResultPreview />
+                        </div>
+                    ) : null}
                 </div>
             )}
         </div>

diff --git a/frontend/src/lib/components/CommandBar/SearchTabs.tsx b/frontend/src/lib/components/CommandBar/SearchTabs.tsx
@@ -12,7 +12,7 @@ type SearchTabsProps = {
 export const SearchTabs = ({ inputRef }: SearchTabsProps): JSX.Element | null => {
     const { tabsGrouped } = useValues(searchBarLogic)
     return (
-        <div className="flex flex-col border-r bg-bg-light w-50 grow-0 shrink-0">
+        <div className="flex flex-col border-r bg-bg-light min-w-30 w-1/3 max-w-50 flex-0 overflow-y-auto">
             {Object.entries(tabsGrouped).map(([group, tabs]) => (
                 <div key={group} className={group !== 'all' ? 'pt-1.5' : ''}>
                     {group !== 'all' && (