fix: limit property value display length to prevent horizontal scrollbars
This commit is contained in:
@@ -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
|
||||||
|
@@ -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))}
|
||||||
|
Reference in New Issue
Block a user