Tabs scrollbar (#258)

crate · Dec 16, 2024 · a5a54fb · a5a54fb
1 parent 680fa3a
commit a5a54fb
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -6,6 +6,7 @@
 
 - Improve spacing on schema tree buttons.
 - Fix case-sensitive error where schema refresh doesn't always occur.
+- Add scrollbar to SQL results tab bar when many resultsets are returned.
 
 ## 2024-12-06 - 0.19.4
 

diff --git a/src/components/CrateTabsShad/CrateTabsShad.tsx b/src/components/CrateTabsShad/CrateTabsShad.tsx
@@ -48,15 +48,17 @@ function CrateTabsShad({
       value={activeTab}
       onValueChange={onTabChange}
     >
-      <TabsList
-        className={`min-h-10 ${hideWhenSingleTab && items.length === 1 ? 'hidden' : 'border-b'}`}
-      >
-        {items.map(item => (
-          <TabsTrigger key={item.key} value={item.key}>
-            {item.label}
-          </TabsTrigger>
-        ))}
-      </TabsList>
+      <div className="overflow-x-auto">
+        <TabsList
+          className={`min-h-10 ${hideWhenSingleTab && items.length === 1 ? 'hidden' : 'border-b'}`}
+        >
+          {items.map(item => (
+            <TabsTrigger key={item.key} value={item.key}>
+              {item.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </div>
       {items.map(item => (
         <TabsContent
           key={item.key}

diff --git a/src/components/SQLResults/SQLResults.tsx b/src/components/SQLResults/SQLResults.tsx
@@ -58,7 +58,7 @@ function SQLResults({ results, format }: Params) {
               })}
             >
               <div className="flex items-center justify-between gap-1.5 text-sm">
-                <span>Result {i}</span>
+                <span className="whitespace-nowrap">Result {i}</span>
                 {queryResult.status === 'EXECUTING' ? (
                   <Loader size={Loader.sizes.SMALL} />
                 ) : queryResult.status === 'ERROR' ? (