Merge pull request #1487 from flanksource/1485-sort-canary-tabs-alpha…

…betically 1485-sort-canary-tabs-alphabetically
flanksource · Nov 8, 2023 · 0ab5db7 · 0ab5db7
2 parents 9e81686 + 74e0499
commit 0ab5db7
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/src/components/Canary/CanaryTabs.tsx b/src/components/Canary/CanaryTabs.tsx
@@ -164,13 +164,15 @@ export function CanaryTabs({
 
   return (
     <Tabs activeTab={selectedTab} onSelectTab={(tab) => setSelectedTab(tab)}>
-      {Object.values(tabs).map((item) => {
-        return (
-          <Tab key={item.label} label={item.label} value={item.value}>
-            {children}
-          </Tab>
-        );
-      })}
+      {Object.values(tabs)
+        .sort((v1, v2) => v1.label.localeCompare(v2.label))
+        .map((item) => {
+          return (
+            <Tab key={item.label} label={item.label} value={item.value}>
+              {children}
+            </Tab>
+          );
+        })}
     </Tabs>
   );
 }
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -96,6 +96,8 @@ export function Tabs({
             onClick={tab.props?.onClick!}
           />
         ))}
+        {/* Add a phantom div to fill border */}
+        <div className="flex-1 border-b border-gray-300" />
       </div>
       <div className={contentClassName}>{content}</div>
     </>