fix:ui of the order detail form

src/components/forms/fields/SmartGridField.tsx

@@ -1,8 +1,7 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { Button } from '../../buttons/Button';
 import { Select } from '../../reusable/Select';
 import { Input } from '../../reusable/Input';
-import { Modal } from '../../reusable/Modal';
 import { Trash2, Pencil } from 'lucide-react';
 import type { FormScreenField } from '../../../api/types';
 
@@ -18,6 +17,7 @@ export function SmartGridField({
   onChange: (val: Record<string, unknown>[]) => void;
 }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const formRef = useRef<HTMLDivElement>(null);
   const [newRow, setNewRow] = useState<Record<string, unknown>>({});
   const [editingIdx, setEditingIdx] = useState<number | null>(null);
 
@@ -49,6 +49,9 @@ export function SmartGridField({
     setEditingIdx(null);
     setNewRow({});
     setIsModalOpen(true);
+    setTimeout(() => {
+      formRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }, 150);
   };
 
   const updateNewRowField = (fieldId: string, val: unknown) => {
@@ -140,7 +143,11 @@ export function SmartGridField({
         onChange([...value, newRow]);
       }
     }
+    
+    // Only close form if we were editing an existing row. For new rows, stay open.
+    if (editingIdx !== null) {
       setIsModalOpen(false);
+    }
     setNewRow({});
     setEditingIdx(null);
   };
@@ -210,7 +217,27 @@ export function SmartGridField({
         </div>
       )}
 
-      <div className="mt-4 p-4 border border-border-subtle rounded-xl bg-white shadow-sm">
+      <div className="flex justify-end mt-2">
+        <Button 
+          type="button" 
+          variant="primary" 
+          size="sm" 
+          onClick={startAdd} 
+          className={`transition-all duration-300 ease-in-out font-bold text-lg leading-none ${isModalOpen || editingIdx !== null ? 'opacity-0 pointer-events-none scale-95 w-0 h-0 p-0 m-0 overflow-hidden' : 'opacity-100 scale-100 rounded-full w-10 h-10 flex items-center justify-center shadow-md'}`}
+          title="Add Row"
+        >
+          +
+        </Button>
+      </div>
+
+      <div 
+        ref={formRef}
+        className={`grid transition-[grid-template-rows,opacity,margin] duration-300 ease-in-out ${
+          isModalOpen || editingIdx !== null ? 'grid-rows-[1fr] opacity-100 mt-4' : 'grid-rows-[0fr] opacity-0 mt-0'
+        }`}
+      >
+        <div className="overflow-hidden">
+          <div className="p-4 border border-border-subtle rounded-xl bg-white shadow-sm">
             <h4 className="text-sm font-semibold text-strong mb-4 flex items-center gap-2">
               {editingIdx !== null ? (
                 <><Pencil size={16} className="text-blue-600" /> Edit Row</>
@@ -274,11 +301,9 @@ export function SmartGridField({
             })}
             
             <div className="flex justify-end gap-2 sm:col-span-2 md:col-span-3 mt-2">
-            {editingIdx !== null && (
-              <Button type="button" variant="ghost" onClick={() => { setEditingIdx(null); setNewRow({}); }}>
+              <Button type="button" variant="ghost" onClick={() => { setIsModalOpen(false); setEditingIdx(null); setNewRow({}); }}>
                 Cancel
               </Button>
-            )}
               <Button type="button" variant="primary" onClick={submitNewRow}>
                 {editingIdx !== null ? "Save Item" : "+ Add to Order"}
               </Button>
@@ -286,5 +311,7 @@ export function SmartGridField({
           </div>
         </div>
         </div>
+      </div>
+    </div>
   );
 }