fix: use grid for better project title responsiveness and ellipsis

1 files 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>