fix: use grid for better project title responsiveness and ellipsis

This commit is contained in:
Kha Nguyen 2025-07-23 00:37:14 -05:00
parent cabf860330
commit e0fac61a91
1 changed files with 6 additions and 4 deletions

View File

@ -79,7 +79,7 @@ export function PropertiesPanel() {
}
if (element?.type === "media") {
const mediaItem = mediaItems.find(
(item) => item.id === element.mediaId
(item) => item.id === element.mediaId,
);
if (mediaItem?.type === "audio") {
@ -101,9 +101,11 @@ export function PropertiesPanel() {
function PropertyItem({ label, value }: { label: string; value: string }) {
return (
<div className="flex justify-between">
<Label className="text-xs text-muted-foreground">{label}</Label>
<span className="text-xs text-right truncate w-40" title={value}>
<div className="grid justify-between grid-cols-6">
<Label className="text-xs text-muted-foreground col-span-2">
{label}
</Label>
<span className="text-xs text-right col-span-4 truncate" title={value}>
{value}
</span>
</div>