From e9bce6e1c33dd2780868a714f84acd9cb3a3ace3 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 2 Jan 2024 18:57:46 +1100
Subject: [PATCH] fix(ui): fix cut off badge on queue actions menu

---
 invokeai/frontend/web/src/app/components/App.tsx          | 2 +-
 .../web/src/features/ui/components/InvokeTabs.tsx         | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx
index f281b92bb7..07fc7e39f7 100644
--- a/invokeai/frontend/web/src/app/components/App.tsx
+++ b/invokeai/frontend/web/src/app/components/App.tsx
@@ -75,7 +75,7 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
     >
       <Grid w="100vw" h="100vh" position="relative" overflow="hidden">
         <ImageUploader>
-          <Grid gap={4} p={4} gridAutoRows="min-content auto" w="full" h="full">
+          <Grid p={4} gridAutoRows="min-content auto" w="full" h="full">
             {headerComponent || <SiteHeader />}
             <Flex gap={4} w="full" h="full">
               <InvokeTabs />
diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
index 1951fef5ef..da22e64ec5 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@@ -232,7 +232,7 @@ const InvokeTabs = () => {
       gap={4}
       isLazy
     >
-      <InvTabList gap={4} flexDir="column">
+      <InvTabList gap={4} pt={4} flexDir="column">
         {tabs}
         <Spacer />
       </InvTabList>
@@ -255,6 +255,7 @@ const InvokeTabs = () => {
               onCollapse={onCollapseOptionsPanel}
               onExpand={onExpandOptionsPanel}
               collapsible
+              style={paddingTop4}
             >
               {activeTabName === 'nodes' ? (
                 <NodeEditorPanelGroup />
@@ -269,7 +270,7 @@ const InvokeTabs = () => {
             />
           </>
         )}
-        <Panel id="main-panel" order={1} minSize={20}>
+        <Panel id="main-panel" order={1} minSize={20} style={paddingTop4}>
           <InvTabPanels w="full" h="full">
             {tabPanels}
           </InvTabPanels>
@@ -290,6 +291,7 @@ const InvokeTabs = () => {
               onCollapse={onCollapseGalleryPanel}
               onExpand={onExpandGalleryPanel}
               collapsible
+              style={paddingTop4}
             >
               <ImageGalleryContent />
             </Panel>
@@ -301,3 +303,5 @@ const InvokeTabs = () => {
 };
 
 export default memo(InvokeTabs);
+
+const paddingTop4: CSSProperties = { paddingTop: '8px' };