fix(ui): models & queue tab styling

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>

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>
   );
 });

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>

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>
   );