From 9fdfd4267cbc66526450648100c36d8780995fb5 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 3 Apr 2024 15:15:56 +1100
Subject: [PATCH] fix(ui): fix model name overflow

Closes #3897
---
 .../subpanels/ModelManagerPanel/ModelListItem.tsx         | 8 +++++---
 .../modelManagerV2/subpanels/ModelPanel/Model.tsx         | 6 +++---
 .../modelManagerV2/subpanels/ModelPanel/ModelAttrView.tsx | 4 +++-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx
index 995a599048..c9d0c03ed8 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx
@@ -90,11 +90,13 @@ const ModelListItem = (props: ModelListItemProps) => {
       cursor="pointer"
       onClick={handleSelectModel}
     >
-      <Flex gap={2} w="full" h="full">
+      <Flex gap={2} w="full" h="full" minW={0}>
         <ModelImage image_url={model.cover_image} />
-        <Flex gap={1} alignItems="flex-start" flexDir="column" w="full">
+        <Flex gap={1} alignItems="flex-start" flexDir="column" w="full" minW={0}>
           <Flex gap={2} w="full" alignItems="flex-start">
-            <Text fontWeight="semibold">{model.name}</Text>
+            <Text fontWeight="semibold" noOfLines={1} wordBreak="break-all">
+              {model.name}
+            </Text>
             <Spacer />
           </Flex>
           <Text variant="subtext" noOfLines={1}>
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Model.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Model.tsx
index 6c5583ade9..d95eed8d24 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Model.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Model.tsx
@@ -87,9 +87,9 @@ export const Model = () => {
     <Flex flexDir="column" gap={4}>
       <Flex alignItems="flex-start" gap={4}>
         <ModelImageUpload model_key={selectedModelKey} model_image={data.cover_image} />
-        <Flex flexDir="column" gap={1} flexGrow={1}>
+        <Flex flexDir="column" gap={1} flexGrow={1} minW={0}>
           <Flex gap={2}>
-            <Heading as="h2" fontSize="lg">
+            <Heading as="h2" fontSize="lg" noOfLines={1} wordBreak="break-all">
               {data.name}
             </Heading>
             <Spacer />
@@ -114,7 +114,7 @@ export const Model = () => {
             )}
           </Flex>
           {data.source && (
-            <Text variant="subtext">
+            <Text variant="subtext" noOfLines={1} wordBreak="break-all">
               {t('modelManager.source')}: {data?.source}
             </Text>
           )}
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelAttrView.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelAttrView.tsx
index f45bfca993..ebdedffebf 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelAttrView.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelAttrView.tsx
@@ -9,7 +9,9 @@ export const ModelAttrView = ({ label, value }: Props) => {
   return (
     <FormControl flexDir="column" alignItems="flex-start" gap={0}>
       <FormLabel>{label}</FormLabel>
-      <Text fontSize="md">{value || '-'}</Text>
+      <Text fontSize="md" noOfLines={1} wordBreak="break-all">
+        {value || '-'}
+      </Text>
     </FormControl>
   );
 };