fix: limit property value display length to prevent horizontal scrollbars

This commit is contained in:
yangdx
2025-04-15 14:33:40 +08:00
parent 3c34ffa422
commit 085cfffdf6
2 changed files with 3 additions and 3 deletions

View File

@@ -116,7 +116,7 @@ const EditablePropertyRow = ({
} }
return ( return (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1 overflow-hidden">
<PropertyName name={name} /> <PropertyName name={name} />
<EditIcon onClick={handleEditClick} />: <EditIcon onClick={handleEditClick} />:
<PropertyValue <PropertyValue

View File

@@ -42,9 +42,9 @@ interface PropertyValueProps {
} }
export const PropertyValue = ({ value, onClick, tooltip }: PropertyValueProps) => ( export const PropertyValue = ({ value, onClick, tooltip }: PropertyValueProps) => (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1 overflow-hidden">
<Text <Text
className="hover:bg-primary/20 rounded p-1 overflow-hidden text-ellipsis" className="hover:bg-primary/20 rounded p-1 overflow-hidden text-ellipsis whitespace-nowrap"
tooltipClassName="max-w-80 -translate-x-15" tooltipClassName="max-w-80 -translate-x-15"
text={value} text={value}
tooltip={tooltip || (typeof value === 'string' ? value : JSON.stringify(value, null, 2))} tooltip={tooltip || (typeof value === 'string' ? value : JSON.stringify(value, null, 2))}