From 3a34485cc7333dce462c29716718f7671a996ec2 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Thu, 10 Jul 2025 14:28:08 +0200
Subject: [PATCH] style: text box in properties panel

---
 apps/web/src/components/editor/properties-panel.tsx | 5 +++--
 apps/web/src/components/ui/textarea.tsx             | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/editor/properties-panel.tsx b/apps/web/src/components/editor/properties-panel.tsx
index 4aea58c..71e8ba1 100644
--- a/apps/web/src/components/editor/properties-panel.tsx
+++ b/apps/web/src/components/editor/properties-panel.tsx
@@ -5,7 +5,7 @@ import { useAspectRatio } from "@/hooks/use-aspect-ratio";
 import { Label } from "../ui/label";
 import { ScrollArea } from "../ui/scroll-area";
 import { useTimelineStore } from "@/stores/timeline-store";
-import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
 import { MediaElement, TextElement } from "@/types/timeline";
 import { useMediaStore } from "@/stores/media-store";
 
@@ -32,9 +32,10 @@ export function PropertiesPanel() {
 
   const TextProperties = (element: TextElement, trackId: string) => (
     <div className="space-y-4 p-5">
-      <Input
+      <Textarea
         placeholder="Name"
         defaultValue={element.content}
+        className="min-h-[4.5rem]"
         onChange={(e) =>
           updateTextElement(trackId, element.id, { content: e.target.value })
         }
diff --git a/apps/web/src/components/ui/textarea.tsx b/apps/web/src/components/ui/textarea.tsx
index 717abc3..69562b3 100644
--- a/apps/web/src/components/ui/textarea.tsx
+++ b/apps/web/src/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       )}
       ref={ref}