make tabs scrollable

PostHog · Dec 12, 2024 · 038d4d4 · 038d4d4
1 parent 95713b3
commit 038d4d4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/frontend/src/scenes/data-warehouse/editor/QueryTabs.tsx b/frontend/src/scenes/data-warehouse/editor/QueryTabs.tsx
@@ -14,7 +14,7 @@ interface QueryTabsProps {
 
 export function QueryTabs({ models, onClear, onClick, onAdd, activeModelUri }: QueryTabsProps): JSX.Element {
     return (
-        <div className="flex flex-row overflow-scroll hide-scrollbar h-10">
+        <div className="flex flex-row w-full overflow-scroll hide-scrollbar h-10">
             {models.map((model: QueryTab) => (
                 <QueryTabComponent
                     key={model.uri.path}

diff --git a/frontend/src/scenes/data-warehouse/editor/QueryWindow.tsx b/frontend/src/scenes/data-warehouse/editor/QueryWindow.tsx
@@ -40,14 +40,16 @@ export function QueryWindow(): JSX.Element {
     const { selectTab, deleteTab, createTab, setQueryInput, runQuery, setError, setIsValidView } = useActions(logic)
 
     return (
-        <div className="flex flex-1 flex-col h-full">
-            <QueryTabs
-                models={allTabs}
-                onClick={selectTab}
-                onClear={deleteTab}
-                onAdd={createTab}
-                activeModelUri={activeModelUri}
-            />
+        <div className="flex flex-1 flex-col h-full overflow-hidden">
+            <div className="overflow-x-auto">
+                <QueryTabs
+                    models={allTabs}
+                    onClick={selectTab}
+                    onClear={deleteTab}
+                    onAdd={createTab}
+                    activeModelUri={activeModelUri}
+                />
+            </div>
             {editingView && (
                 <div className="h-7 bg-warning-highlight p-1">
                     <span> Editing view "{editingView.name}"</span>