From e0fac61a91a226c9d489f204b78b196e32bbd143 Mon Sep 17 00:00:00 2001
From: Kha Nguyen <hi@khanguyen.com>
Date: Wed, 23 Jul 2025 00:37:14 -0500
Subject: [PATCH] fix: use grid for better project title responsiveness and
 ellipsis

---
 .../src/components/editor/properties-panel/index.tsx   | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index 4fc5d89d..49530d4e 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -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>