From d11cb5c4ea00330b446a2eb5360fb2f9a0dcbcff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Obermu=CC=88ller?= <thomas.obermueller@gmail.com>
Date: Thu, 16 Nov 2023 11:51:27 +0100
Subject: [PATCH] implement styling suggestions

---
 frontend/src/lib/components/CommandBar/CommandBar.tsx   | 2 +-
 frontend/src/lib/components/CommandBar/SearchBarTab.tsx | 5 ++++-
 frontend/src/lib/components/CommandBar/SearchTabs.tsx   | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/CommandBar/CommandBar.tsx b/frontend/src/lib/components/CommandBar/CommandBar.tsx
index 126abf698d2de..3850051e60551 100644
--- 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
index 5fa7b960d37e3..f218824187a26 100644
--- 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
index cd3d9fef739be..bc83ed1110a76 100644
--- 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} />