From d9b9664a9dedf549b3e0f1cc4e7c37130ce57240 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Thu, 7 May 2026 08:55:18 +0200
Subject: [PATCH] feat: implement auto-resize textareas in EditPanel for
 descriptions and details

---
 src/App.tsx                  |  2 +-
 src/components/EditPanel.tsx | 56 +++++++++++++++++++++++++++++++-----
 2 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2b7b8c1..610742b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -46,7 +46,7 @@ const FORCED_ZERO_STOCK_SKUS = new Set([
   '5712VC', '5721VC', '5807VC', '5823VC', '5825VC', '5835VC', '5852VC', '5871VC',
   '5872VC', '5873VC', '5874VC', '5882VC', '5883VC', '5885VC', '5987VC', '5991VC',
   '5995VC', '6001VC', '6007VC', '6040VC', '6151VC', '6252VC', '6255VC', '6270VC',
-  '6471VC', '5658VCI'
+  '6471VC', '5658VCI', '2915244CLM', '30512912CLM', '2861262CLM', '41683MDRG', '41891MDRG'
 ]);
 
 export default function App() {
diff --git a/src/components/EditPanel.tsx b/src/components/EditPanel.tsx
index 80be7df..f32b448 100644
--- a/src/components/EditPanel.tsx
+++ b/src/components/EditPanel.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { ExcelRow } from '../types';
 import { useColumns } from '../contexts/ColumnsContext';
 import { X, Sparkles, Save, Loader2, Languages, Package, CheckCircle2, Mic, MicOff } from 'lucide-react';
@@ -40,6 +40,48 @@ const DimensionInput = ({ label, value, isModified, onChange, placeholder }: Dim
   </div>
 );
 
+const AutoResizeTextarea = ({ 
+  id, 
+  value, 
+  onChange, 
+  onKeyDown, 
+  className, 
+  placeholder 
+}: { 
+  id?: string; 
+  value: string; 
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void; 
+  onKeyDown?: (e: React.KeyboardEvent) => void; 
+  className?: string; 
+  placeholder?: string; 
+}) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const adjustHeight = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = 'auto';
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  }, []);
+
+  useEffect(() => {
+    adjustHeight();
+  }, [value, adjustHeight]);
+
+  return (
+    <textarea
+      id={id}
+      ref={textareaRef}
+      value={value}
+      onChange={onChange}
+      onKeyDown={onKeyDown}
+      className={cn(className, "overflow-hidden resize-none")}
+      placeholder={placeholder}
+    />
+  );
+};
+
 interface FieldEditorProps {
   title: string;
   field: string;
@@ -112,13 +154,13 @@ const FieldEditor = ({
         </div>
       )}
     </div>
-    <textarea
+    <AutoResizeTextarea
       id={`field-${field}`}
       value={value}
       onChange={e => onChange(e.target.value)}
       onKeyDown={onKeyDown}
       className={cn(
-        "w-full h-32 bg-slate-900 border rounded-md p-3 text-sm text-white focus:outline-none focus:ring-1 transition-colors resize-none",
+        "w-full min-h-[128px] bg-slate-900 border rounded-md p-3 text-sm text-white focus:outline-none focus:ring-1 transition-colors",
         isModified ? "border-blue-500 focus:ring-blue-500" : "border-slate-700 focus:border-slate-500 focus:ring-slate-500"
       )}
       placeholder={`Enter ${title}...`}
@@ -359,11 +401,11 @@ export function EditPanel({ row, rowIndex, onSave, onClose, onCaptureState }: Ed
             </div>
             <div className="col-span-2">
               <span className="block text-xs text-slate-500 mb-1">Details (DE)</span>
-              <textarea
+              <AutoResizeTextarea
                 value={formData.detailsDe}
                 onChange={e => setFormData(prev => ({ ...prev, detailsDe: e.target.value }))}
                 className={cn(
-                  "w-full h-20 bg-slate-900 border rounded p-2 text-sm text-white focus:outline-none focus:ring-1 transition-colors resize-none",
+                  "w-full min-h-[80px] bg-slate-900 border rounded p-2 text-sm text-white focus:outline-none focus:ring-1 transition-colors",
                   isModified('detailsDe') ? "border-blue-500 focus:ring-blue-500" : "border-slate-700/50"
                 )}
                 placeholder="Enter details in German..."
@@ -371,11 +413,11 @@ export function EditPanel({ row, rowIndex, onSave, onClose, onCaptureState }: Ed
             </div>
             <div className="col-span-2">
               <span className="block text-xs text-slate-500 mb-1">Details (EN)</span>
-              <textarea
+              <AutoResizeTextarea
                 value={formData.detailsEn}
                 onChange={e => setFormData(prev => ({ ...prev, detailsEn: e.target.value }))}
                 className={cn(
-                  "w-full h-20 bg-slate-900 border rounded p-2 text-sm text-white focus:outline-none focus:ring-1 transition-colors resize-none",
+                  "w-full min-h-[80px] bg-slate-900 border rounded p-2 text-sm text-white focus:outline-none focus:ring-1 transition-colors",
                   isModified('detailsEn') ? "border-blue-500 focus:ring-blue-500" : "border-slate-700/50"
                 )}
                 placeholder="Enter details in English..."