1 files changed, 38 insertions, 26 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..720c4a26 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -1,14 +1,12 @@
 "use client";
 
-import { useProjectStore } from "@/stores/project-store";
+import { FPS_PRESETS } from "@/constants/timeline-constants";
 import { useAspectRatio } from "@/hooks/use-aspect-ratio";
+import { useMediaStore } from "@/stores/media-store";
+import { useProjectStore } from "@/stores/project-store";
+import { useTimelineStore } from "@/stores/timeline-store";
 import { Label } from "../../ui/label";
 import { ScrollArea } from "../../ui/scroll-area";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { useMediaStore } from "@/stores/media-store";
-import { AudioProperties } from "./audio-properties";
-import { MediaProperties } from "./media-properties";
-import { TextProperties } from "./text-properties";
 import {
   Select,
   SelectContent,
@@ -16,7 +14,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../ui/select";
-import { FPS_PRESETS } from "@/constants/timeline-constants";
+import { AudioProperties } from "./audio-properties";
+import { MediaProperties } from "./media-properties";
+import {
+  PropertyItem,
+  PropertyItemLabel,
+  PropertyItemValue,
+} from "./property-item";
+import { TextProperties } from "./text-properties";
 
 export function PropertiesPanel() {
   const { activeProject, updateProjectFps } = useProjectStore();
@@ -35,13 +40,31 @@ export function PropertiesPanel() {
     <div className="space-y-4 p-5">
       {/* Media Properties */}
       <div className="flex flex-col gap-3">
-        <PropertyItem label="Name:" value={activeProject?.name || ""} />
-        <PropertyItem label="Aspect ratio:" value={getDisplayName()} />
-        <PropertyItem
-          label="Resolution:"
-          value={`${canvasSize.width} × ${canvasSize.height}`}
-        />
-        <div className="flex justify-between items-center">
+        <PropertyItem direction="column">
+          <PropertyItemLabel className="text-xs text-muted-foreground">
+            Name:
+          </PropertyItemLabel>
+          <PropertyItemValue className="text-xs truncate">
+            {activeProject?.name || ""}
+          </PropertyItemValue>
+        </PropertyItem>
+        <PropertyItem direction="column">
+          <PropertyItemLabel className="text-xs text-muted-foreground">
+            Aspect ratio:
+          </PropertyItemLabel>
+          <PropertyItemValue className="text-xs truncate">
+            {getDisplayName()}
+          </PropertyItemValue>
+        </PropertyItem>
+        <PropertyItem direction="column">
+          <PropertyItemLabel className="text-xs text-muted-foreground">
+            Resolution:
+          </PropertyItemLabel>
+          <PropertyItemValue className="text-xs truncate">
+            {`${canvasSize.width} × ${canvasSize.height}`}
+          </PropertyItemValue>
+        </PropertyItem>
+        <div className="flex flex-col gap-1">
           <Label className="text-xs text-muted-foreground">Frame rate:</Label>
           <Select
             value={(activeProject?.fps || 30).toString()}
@@ -83,7 +106,7 @@ export function PropertiesPanel() {
               );
 
               if (mediaItem?.type === "audio") {
-                return <AudioProperties element={element} />;
+                return <AudioProperties key={elementId} element={element} />;
               }
 
               return (
@@ -98,14 +121,3 @@ export function PropertiesPanel() {
     </ScrollArea>
   );
 }
-
-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}>
-        {value}
-      </span>
-    </div>
-  );
-}