implement styling suggestions

PostHog · Nov 16, 2023 · d11cb5c · d11cb5c
1 parent 413ebb6
commit d11cb5c
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/frontend/src/lib/components/CommandBar/CommandBar.tsx b/frontend/src/lib/components/CommandBar/CommandBar.tsx
@@ -12,7 +12,7 @@ import { ActionBar } from './ActionBar'
 
 const CommandBarOverlay = ({ children }: { children?: React.ReactNode }): JSX.Element => (
     <div
-        className="fixed top-0 left-0 w-full h-full flex flex-col items-center justify-center"
+        className="fixed top-0 left-0 w-full h-full flex flex-col items-center justify-center p-3"
         // eslint-disable-next-line react/forbid-dom-props
         style={{
             zIndex: 'var(--z-command-palette)',

diff --git a/frontend/src/lib/components/CommandBar/SearchBarTab.tsx b/frontend/src/lib/components/CommandBar/SearchBarTab.tsx
@@ -13,7 +13,10 @@ type SearchBarTabProps = {
 export const SearchBarTab = ({ type, active, count }: SearchBarTabProps): JSX.Element => {
     const { setActiveTab } = useActions(searchBarLogic)
     return (
-        <div className={`px-3 py-2 cursor-pointer text-xs ${active && 'font-bold'}`} onClick={() => setActiveTab(type)}>
+        <div
+            className={`px-3 py-2 cursor-pointer text-xs whitespace-nowrap ${active && 'font-bold'}`}
+            onClick={() => setActiveTab(type)}
+        >
             {resultTypeToName[type]}
             {count != null && <span className="ml-1 text-xxs text-muted-3000">{count}</span>}
         </div>

diff --git a/frontend/src/lib/components/CommandBar/SearchTabs.tsx b/frontend/src/lib/components/CommandBar/SearchTabs.tsx
@@ -12,7 +12,7 @@ export const SearchTabs = (): JSX.Element | null => {
     }
 
     return (
-        <div className="flex items-center border-t space-x-3 px-2">
+        <div className="flex items-center border-t space-x-3 px-2 shrink-0 overflow-x-auto">
             <SearchBarTab type="all" active={activeTab === 'all'} />
             {Object.entries(searchResponse.counts).map(([type, count]) => (
                 <SearchBarTab key={type} type={type as ResultType} count={count} active={activeTab === type} />