From 041023df53bc088b8a921e9e9b13f3e2f91d8648 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 20 Jun 2025 16:34:55 +1000
Subject: [PATCH] feat(ui): tweak vertical tab bar layout

---
 .../frontend/web/src/features/ui/components/AppContent.tsx  | 6 ++----
 .../frontend/web/src/features/ui/components/TabButton.tsx   | 3 +--
 .../web/src/features/ui/components/VerticalNavBar.tsx       | 2 +-
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/invokeai/frontend/web/src/features/ui/components/AppContent.tsx b/invokeai/frontend/web/src/features/ui/components/AppContent.tsx
index f810d8e1e4..7952177192 100644
--- a/invokeai/frontend/web/src/features/ui/components/AppContent.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/AppContent.tsx
@@ -1,7 +1,7 @@
 import 'dockview/dist/styles/dockview.css';
 import 'features/ui/styles/dockview-theme-invoke.css';
 
-import { TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
+import { TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useDndMonitor } from 'features/dnd/useDndMonitor';
 import { VerticalNavBar } from 'features/ui/components/VerticalNavBar';
@@ -22,9 +22,7 @@ export const AppContent = memo(() => {
 
   return (
     <Tabs index={tabIndex} display="flex" w="full" h="full" p={0} overflow="hidden">
-      <TabList>
-        <VerticalNavBar />
-      </TabList>
+      <VerticalNavBar />
       <TabPanels w="full" h="full" p={0}>
         <TabMountGate tab="generate">
           <TabPanel w="full" h="full" p={0}>
diff --git a/invokeai/frontend/web/src/features/ui/components/TabButton.tsx b/invokeai/frontend/web/src/features/ui/components/TabButton.tsx
index 6bcc351618..a112ac9fb5 100644
--- a/invokeai/frontend/web/src/features/ui/components/TabButton.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/TabButton.tsx
@@ -1,5 +1,5 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { IconButton, Tab, Tooltip } from '@invoke-ai/ui-library';
+import { IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useCallbackOnDragEnter } from 'common/hooks/useCallbackOnDragEnter';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
@@ -26,7 +26,6 @@ export const TabButton = memo(({ tab, icon, label }: { tab: TabName; icon: React
   return (
     <Tooltip label={label} placement="end">
       <IconButton
-        as={Tab}
         p={0}
         ref={ref}
         onClick={selectTab}
diff --git a/invokeai/frontend/web/src/features/ui/components/VerticalNavBar.tsx b/invokeai/frontend/web/src/features/ui/components/VerticalNavBar.tsx
index 5fd9baae8f..8923707569 100644
--- a/invokeai/frontend/web/src/features/ui/components/VerticalNavBar.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/VerticalNavBar.tsx
@@ -27,7 +27,7 @@ export const VerticalNavBar = memo(() => {
   return (
     <Flex flexDir="column" alignItems="center" py={6} px={4} gap={4} minW={0}>
       <InvokeAILogoComponent />
-      <Flex gap={4} pt={6} h="full" flexDir="column">
+      <Flex gap={6} pt={6} h="full" flexDir="column">
         <TabMountGate tab="generate">
           <TabButton tab="generate" icon={<PiTextAaBold />} label="Generate" />
         </TabMountGate>