add fallback image and make sure description text is legible for model picker noncompact

This commit is contained in:
Mary Hipp
2025-07-16 09:09:57 -04:00
committed by Mary Hipp Rogers
parent a1ade2b8c0
commit b8bf89c2f1
2 changed files with 22 additions and 1 deletions

View File

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

View File

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