refactor(ModelList): extract NameSpan component and adjust styling for better layout

This commit is contained in:
ousugo 2025-04-18 03:31:32 +08:00 committed by 亢奋猫
parent 36aa13c4f1
commit 579d7d1e5d

View File

@ -289,9 +289,9 @@ const ModelList: React.FC<ModelListProps> = ({ providerId, modelStatuses = [], s
</Typography.Text> </Typography.Text>
} }
placement="top"> placement="top">
<span>{model.name}</span> <NameSpan>{model.name}</NameSpan>
</Tooltip> </Tooltip>
<ModelTagsWithLabel model={model} size={11} /> <ModelTagsWithLabel model={model} size={11} style={{ flexShrink: 0 }} />
</ListItemName> </ListItemName>
</HStack> </HStack>
<Flex gap={4} align="center"> <Flex gap={4} align="center">
@ -371,7 +371,13 @@ const ListItemName = styled.div`
font-size: 14px; font-size: 14px;
line-height: 1; line-height: 1;
font-weight: 600; font-weight: 600;
span { min-width: 0;
overflow: hidden;
flex: 1;
width: 0;
`
const NameSpan = styled.span`
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -379,7 +385,6 @@ const ListItemName = styled.div`
font-family: 'Ubuntu'; font-family: 'Ubuntu';
line-height: 30px; line-height: 30px;
font-size: 14px; font-size: 14px;
}
` `
const RemoveIcon = styled(MinusCircleOutlined)` const RemoveIcon = styled(MinusCircleOutlined)`