From fe115ff8f9217aeed18811033fcfe4989dc07f39 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 1 Jul 2025 20:23:18 +1000
Subject: [PATCH] fix(ui): models & queue tab styling

---
 .../subpanels/ModelPanel/ModelView.tsx        |  2 +-
 .../subpanels/ModelPanel/RelatedModels.tsx    | 28 ++++++++++---------
 .../ui/components/tabs/ModelManagerTab.tsx    |  2 +-
 .../features/ui/components/tabs/QueueTab.tsx  |  2 +-
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelView.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelView.tsx
index 44378f3714..c30b4d1252 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelView.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelView.tsx
@@ -84,7 +84,7 @@ export const ModelView = memo(({ modelConfig }: Props) => {
             )}
           </Box>
         )}
-        <Box maxH={50} overflowY="auto" layerStyle="second" borderRadius="base" p={4}>
+        <Box overflowY="auto" layerStyle="second" borderRadius="base" p={4}>
           <RelatedModels modelConfig={modelConfig} />
         </Box>
       </Flex>
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/RelatedModels.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/RelatedModels.tsx
index 74dd23f40c..5cb024c8e7 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/RelatedModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/RelatedModels.tsx
@@ -291,20 +291,22 @@ export const RelatedModels = memo(({ modelConfig }: Props) => {
           <FormErrorMessage key={error}>{error}</FormErrorMessage>
         ))}
       </FormControl>
-      <Box>
-        <Flex gap="2" flexWrap="wrap">
-          {groupedModelConfigs.map((group, i) => {
-            const withDivider = i < groupedModelConfigs.length - 1;
+      {groupedModelConfigs.length > 0 && (
+        <Box>
+          <Flex gap="2" flexWrap="wrap">
+            {groupedModelConfigs.map((group, i) => {
+              const withDivider = i < groupedModelConfigs.length - 1;
 
-            return (
-              <Box key={group.type} mb={4}>
-                <ModelTagGroup group={group} isLoading={isLoading} removeHandlers={removeHandlers} />
-                {withDivider && <Divider my={4} opacity={0.3} />}
-              </Box>
-            );
-          })}
-        </Flex>
-      </Box>
+              return (
+                <Box key={group.type} mb={4}>
+                  <ModelTagGroup group={group} isLoading={isLoading} removeHandlers={removeHandlers} />
+                  {withDivider && <Divider my={4} opacity={0.3} />}
+                </Box>
+              );
+            })}
+          </Flex>
+        </Box>
+      )}
     </Flex>
   );
 });
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx
index 8f17795afc..ae772e25e3 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx
@@ -5,7 +5,7 @@ import { memo } from 'react';
 
 const ModelManagerTab = () => {
   return (
-    <Flex layerStyle="body" w="full" h="full" gap="2">
+    <Flex layerStyle="body" w="full" h="full" gap="2" p={2}>
       <ModelManager />
       <ModelPane />
     </Flex>
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/QueueTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/QueueTab.tsx
index 1d6d8b6181..1897e3ce2d 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/QueueTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/QueueTab.tsx
@@ -4,7 +4,7 @@ import { memo } from 'react';
 
 const QueueTab = () => {
   return (
-    <Flex layerStyle="body" w="full" h="full">
+    <Flex layerStyle="body" w="full" h="full" p={2}>
       <QueueTabContent />
     </Flex>
   );