From 36a1d39454f05ace8d8b9e988033cab5feeb0696 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Tue, 20 Aug 2024 12:00:48 -0400
Subject: [PATCH] fix(ui): handle badge styling when template name is long

---
 .../stylePresets/components/ActiveStylePreset.tsx         | 8 ++++----
 .../stylePresets/components/StylePresetMenuTrigger.tsx    | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/invokeai/frontend/web/src/features/stylePresets/components/ActiveStylePreset.tsx b/invokeai/frontend/web/src/features/stylePresets/components/ActiveStylePreset.tsx
index d72df6434e..776ffe6a4d 100644
--- a/invokeai/frontend/web/src/features/stylePresets/components/ActiveStylePreset.tsx
+++ b/invokeai/frontend/web/src/features/stylePresets/components/ActiveStylePreset.tsx
@@ -69,10 +69,10 @@ export const ActiveStylePreset = () => {
     );
   }
   return (
-    <Flex justifyContent="space-between" w="full" alignItems="center">
-      <Flex gap={2} alignItems="center">
-        <StylePresetImage imageWidth={25} presetImageUrl={activeStylePreset.image} />
-        <Flex flexDir="column">
+    <Flex justifyContent="space-between" flexGrow={1} alignItems="center" gap={2} overflow="hidden">
+      <StylePresetImage imageWidth={25} presetImageUrl={activeStylePreset.image} />
+      <Flex flexDir="column" flexGrow={1} overflow="hidden">
+        <Flex>
           <Badge colorScheme="invokeBlue" variant="subtle">
             {activeStylePreset.name}
           </Badge>
diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenuTrigger.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenuTrigger.tsx
index bb1c494d88..a204effbd6 100644
--- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenuTrigger.tsx
+++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenuTrigger.tsx
@@ -34,6 +34,7 @@ export const StylePresetMenuTrigger = () => {
       _hover={_hover}
       transitionProperty="background-color"
       transitionDuration="normal"
+      w="full"
     >
       <ActiveStylePreset />