fixed search bar layout for firefox

PostHog · Dec 18, 2024 · 04e2cbf · 04e2cbf
1 parent 55a6b91
commit 04e2cbf
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 12 deletions.
diff --git a/frontend/src/lib/components/CommandBar/CommandBar.tsx b/frontend/src/lib/components/CommandBar/CommandBar.tsx
@@ -26,7 +26,7 @@ const CommandBarOverlay = forwardRef<HTMLDivElement, CommandBarOverlayProps>(fun
                     data-attr="command-bar"
                     className={`w-full ${
                         barStatus === BarStatus.SHOW_SEARCH && 'h-full'
-                    } bg-bg-3000 rounded overflow-hidden border border-border-bold`}
+                    } w-full bg-bg-3000 rounded overflow-hidden border border-border-bold`}
                     ref={ref}
                 >
                     {children}

diff --git a/frontend/src/lib/components/CommandBar/SearchBar.tsx b/frontend/src/lib/components/CommandBar/SearchBar.tsx
@@ -13,12 +13,14 @@ export const SearchBar = (): JSX.Element => {
     const inputRef = useRef<HTMLInputElement>(null)
 
     return (
-        <div className="grid grid-cols-[8.5rem_1fr] lg:grid-cols-[12.5rem_1fr] w-full h-full">
+        <div className="grid grid-cols-[8.5rem_1fr] lg:grid-cols-[12.5rem_1fr] h-full">
             <SearchTabs inputRef={inputRef} />
-            <div className="grid grid-rows-[auto_100%] overscroll-contain overflow-hidden">
+            <div className="grid grid-rows-[49px_calc(40rem-49px)] overflow-hidden overscroll-contain">
                 <SearchInput ref={inputRef} />
                 <SearchResults />
             </div>
         </div>
     )
 }
+// grid-rows-[49px_calc(40rem-49px)]
+// 49px calc(572px - 46px) !important
diff --git a/frontend/src/lib/components/CommandBar/SearchResults.tsx b/frontend/src/lib/components/CommandBar/SearchResults.tsx
@@ -9,16 +9,16 @@ export const SearchResults = (): JSX.Element => {
     const { combinedSearchResults, combinedSearchLoading, activeResultIndex } = useValues(searchBarLogic)
 
     return (
-        <div className="SearchResults grow">
+        <>
             {!combinedSearchLoading && combinedSearchResults?.length === 0 ? (
                 <div className="w-full h-full flex flex-col items-center justify-center p-3 text-center">
                     <h3 className="mb-0 text-xl">No results</h3>
                     <p className="opacity-75 mb-0">This doesn't happen often, but we're stumped!</p>
                     <DetectiveHog height={150} width={150} />
                 </div>
             ) : (
-                <div className="md:grid md:grid-rows-none md:grid-cols-[320px_1fr] overflow-auto md:overflow-hidden overscroll-contain h-full">
-                    <div className="border-r border-b md:border-b-0 bg-bg-3000 overscroll-contain overflow-y-auto w-full">
+                <div className="md:grid md:grid-cols-[320px_1fr]">
+                    <div className="border-r border-b md:border-b-0 bg-bg-3000 overscroll-contain overflow-y-auto">
                         {combinedSearchLoading && (
                             <>
                                 <SearchResultSkeleton />
@@ -41,6 +41,6 @@ export const SearchResults = (): JSX.Element => {
                     </div>
                 </div>
             )}
-        </div>
+        </>
     )
 }
diff --git a/frontend/src/lib/components/CommandBar/index.scss b/frontend/src/lib/components/CommandBar/index.scss
@@ -16,11 +16,6 @@
     }
 }
 
-.SearchResults {
-    // offset container height by input
-    height: calc(100% - 2.875rem);
-}
-
 .CommandBar__overlay {
     position: fixed;
     top: 0;