fix: handle project renaming errors and adjust input styling in properties panel

2 files changed, 11 insertions, 4 deletions

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index 7b915897..45414ecc 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -43,7 +43,14 @@ export function EditorHeader() {
   // Save the new name if changed, exit edit mode

   const handleNameSave = async () => {

     if (activeProject && newName.trim() && newName !== activeProject.name) {

-      await renameProject(activeProject.id, newName.trim());

+      try {

+        await renameProject(activeProject.id, newName.trim());

+      }

+      catch (error) {

+        console.error('Failed to rename project:', error);

+        // Reset to original name on error

+        setNewName(activeProject.name);

+      }

     }

     setIsEditing(false);

   };

@@ -68,7 +75,7 @@ export function EditorHeader() {
           // Editable input for project name using standard Input component

           <Input

             ref={inputRef}

-            className="text-sm font-medium px-2 py-1 h-7 truncate"

+            className="text-sm font-medium px-2 py-1 h-9 truncate"

             value={newName}

             onChange={e => setNewName(e.target.value)}

             onBlur={handleNameSave}

diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index d96e1e99..d30cd0ff 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -34,7 +34,7 @@ export function PropertiesPanel() {
   const emptyView = (
     <div className="space-y-4 p-5">
       {/* Media Properties */}
-      <div className="flex flex-col gap-3 ">
+      <div className="flex flex-col gap-3">
         <PropertyItem label="Name:" value={activeProject?.name || ""} />
         <PropertyItem label="Aspect ratio:" value={getDisplayName()} />
         <PropertyItem
@@ -103,7 +103,7 @@ 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 text-ellipsis overflow-clip w-40" title={value}>{value}</span>
++     <span className="text-xs text-right truncate w-40" title={value}>{value}</span>
     </div>
   );
 }