From b8bf89c2f1147ee6c02e0ec6ee96e9d1d7944c9e Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Pro.local>
Date: Wed, 16 Jul 2025 09:09:57 -0400
Subject: [PATCH] add fallback image and make sure description text is legible
 for model picker noncompact

---
 .../subpanels/ModelManagerPanel/ModelImage.tsx       | 11 +++++++++++
 .../features/parameters/components/ModelPicker.tsx   | 12 +++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelImage.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelImage.tsx
index 2b8085ff5b..e9f062eb2d 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelImage.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelImage.tsx
@@ -34,6 +34,17 @@ const ModelImage = ({ image_url }: Props) => {
       minHeight={MODEL_IMAGE_THUMBNAIL_SIZE}
       minWidth={MODEL_IMAGE_THUMBNAIL_SIZE}
       borderRadius="base"
+      fallback={
+        <Flex
+          height={MODEL_IMAGE_THUMBNAIL_SIZE}
+          minWidth={MODEL_IMAGE_THUMBNAIL_SIZE}
+          borderRadius="base"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Icon color="base.500" as={PiImage} boxSize={FALLBACK_ICON_SIZE} />
+        </Flex>
+      }
     />
   );
 };
diff --git a/invokeai/frontend/web/src/features/parameters/components/ModelPicker.tsx b/invokeai/frontend/web/src/features/parameters/components/ModelPicker.tsx
index 036d1b5aff..7ed0b1cb1a 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ModelPicker.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ModelPicker.tsx
@@ -413,6 +413,12 @@ const optionNameSx: SystemStyleObject = {
   },
 };
 
+const optionDescriptionSx: SystemStyleObject = {
+  '&[data-is-compact="true"]': {
+    color: 'base.800',
+  },
+};
+
 const PickerOptionComponent = typedMemo(
   <T extends AnyModelConfig>({ option, ...rest }: { option: WithStarred<T> } & BoxProps) => {
     const { $compactView } = usePickerContext<WithStarred<T>>();
@@ -453,7 +459,11 @@ const PickerOptionComponent = typedMemo(
               </Text>
             )}
           </Flex>
-          {option.description && !compactView && <Text color="base.200">{option.description}</Text>}
+          {option.description && !compactView && (
+            <Text sx={optionDescriptionSx} data-is-compact={compactView}>
+              {option.description}
+            </Text>
+          )}
         </Flex>
       </Flex>
     );