Merge pull request [#444](https://github.com/mazeincoding/AppCut/issues/444)

2 files changed, 17 insertions, 15 deletions

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index 96b47800..837bd97a 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -23,7 +23,7 @@ export function EditorHeader() {
     // TODO: Implement export functionality
     // NOTE: This is already being worked on
     console.log("Export project");
-    window.open('https://youtube.com/watch?v=dQw4w9WgXcQ', '_blank');
+    window.open("https://youtube.com/watch?v=dQw4w9WgXcQ", "_blank");
   };
 
   const handleNameClick = () => {
@@ -57,11 +57,11 @@ export function EditorHeader() {
       >
         <ChevronLeft className="h-4 w-4" />
       </Link>
-      <div className="w-[14rem] h-9 flex items-center">
+      <div className="w-40 xl:w-60 h-9 flex items-center">
         {isEditing ? (
           <Input
             ref={inputRef}
-            className="text-sm font-medium px-2 py-1 h-9 truncate"
+            className="text-sm font-medium w-full px-2 py-1 h-9 truncate"
             value={newName}
             onChange={(e) => setNewName(e.target.value)}
             onBlur={handleNameSave}
@@ -80,7 +80,7 @@ export function EditorHeader() {
             onClick={handleNameClick}
             onKeyDown={(e) => e.key === "Enter" && handleNameClick()}
           >
-            <div className="truncate text-ellipsis overflow-clip w-40">
+            <div className="truncate text-ellipsis overflow-clip max-w-40 xl:max-w-60">
               {activeProject?.name}
             </div>
           </span>
diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index ec1942f7..3f38bd78 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,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../ui/select";
-import { FPS_PRESETS } from "@/constants/timeline-constants";
+import { AudioProperties } from "./audio-properties";
+import { MediaProperties } from "./media-properties";
+import { TextProperties } from "./text-properties";
 
 export function PropertiesPanel() {
   const { activeProject, updateProjectFps } = useProjectStore();
@@ -83,7 +83,7 @@ export function PropertiesPanel() {
               );
 
               if (mediaItem?.type === "audio") {
-                return <AudioProperties element={element} />;
+                return <AudioProperties key={elementId} element={element} />;
               }
 
               return (
@@ -101,9 +101,11 @@ export function PropertiesPanel() {
 
 function PropertyItem({ label, value }: { label: string; value: string }) {
   return (
-    <div className="flex flex-col gap-1">
-      <Label className="text-xs text-muted-foreground">{label}</Label>
-      <span className="text-xs break-words" 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>