From 108f1b1a2a895a69013d069179a4479fb4cb0d0a Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Mon, 13 Apr 2026 17:17:29 +0200
Subject: [PATCH] GridTable: render multi-line cells with textarea

Cells containing \n (bullet items with continuation lines) now use
<textarea> instead of <input type=text>, making all lines visible.
Row height auto-expands based on line count in the cell.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/grid-editor/GridTable.tsx      | 75 +++++++++++++------
 1 file changed, 54 insertions(+), 21 deletions(-)

diff --git a/admin-lehrer/components/grid-editor/GridTable.tsx b/admin-lehrer/components/grid-editor/GridTable.tsx
index 6b2d9c0..e395e52 100644
--- a/admin-lehrer/components/grid-editor/GridTable.tsx
+++ b/admin-lehrer/components/grid-editor/GridTable.tsx
@@ -107,12 +107,18 @@ export function GridTable({
     const row = zone.rows.find((r) => r.index === rowIndex)
     if (!row) return Math.max(MIN_ROW_HEIGHT, avgRowHeightPx * scale)
 
+    // Multi-line cells (containing \n): expand height based on line count
+    const rowCells = zone.cells.filter((c) => c.row_index === rowIndex)
+    const maxLines = Math.max(1, ...rowCells.map((c) => (c.text ?? '').split('\n').length))
+    if (maxLines > 1) {
+      const lineH = Math.max(MIN_ROW_HEIGHT, avgRowHeightPx * scale)
+      return lineH * maxLines
+    }
+
     if (isHeader) {
-      // Headers keep their measured height
       const measuredH = row.y_max_px - row.y_min_px
       return Math.max(MIN_ROW_HEIGHT, measuredH * scale)
     }
-    // Content rows use average for uniformity
     return Math.max(MIN_ROW_HEIGHT, avgRowHeightPx * scale)
   }
 
@@ -535,25 +541,52 @@ export function GridTable({
                           ))}
                         </div>
                       ) : (
-                        <input
-                          id={`cell-${cellId}`}
-                          type="text"
-                          value={cell?.text ?? ''}
-                          onChange={(e) => onCellTextChange(cellId, e.target.value)}
-                          onFocus={() => onSelectCell(cellId)}
-                          onClick={(e) => {
-                            if ((e.metaKey || e.ctrlKey) && onToggleCellSelection) {
-                              e.preventDefault()
-                              onToggleCellSelection(cellId)
-                            }
-                          }}
-                          onKeyDown={(e) => handleKeyDown(e, cellId)}
-                          className={`w-full px-2 bg-transparent border-0 outline-none ${
-                            isBold ? 'font-bold' : 'font-normal'
-                          }`}
-                          style={{ color: cellColor || undefined }}
-                          spellCheck={false}
-                        />
+                        {(cell?.text ?? '').includes('\n') ? (
+                          <textarea
+                            id={`cell-${cellId}`}
+                            value={cell?.text ?? ''}
+                            onChange={(e) => onCellTextChange(cellId, e.target.value)}
+                            onFocus={() => onSelectCell(cellId)}
+                            onClick={(e) => {
+                              if ((e.metaKey || e.ctrlKey) && onToggleCellSelection) {
+                                e.preventDefault()
+                                onToggleCellSelection(cellId)
+                              }
+                            }}
+                            onKeyDown={(e) => {
+                              if (e.key === 'Tab') {
+                                e.preventDefault()
+                                onNavigate(cellId, e.shiftKey ? 'left' : 'right')
+                              }
+                            }}
+                            rows={(cell?.text ?? '').split('\n').length}
+                            className={`w-full px-2 bg-transparent border-0 outline-none resize-none ${
+                              isBold ? 'font-bold' : 'font-normal'
+                            }`}
+                            style={{ color: cellColor || undefined }}
+                            spellCheck={false}
+                          />
+                        ) : (
+                          <input
+                            id={`cell-${cellId}`}
+                            type="text"
+                            value={cell?.text ?? ''}
+                            onChange={(e) => onCellTextChange(cellId, e.target.value)}
+                            onFocus={() => onSelectCell(cellId)}
+                            onClick={(e) => {
+                              if ((e.metaKey || e.ctrlKey) && onToggleCellSelection) {
+                                e.preventDefault()
+                                onToggleCellSelection(cellId)
+                              }
+                            }}
+                            onKeyDown={(e) => handleKeyDown(e, cellId)}
+                            className={`w-full px-2 bg-transparent border-0 outline-none ${
+                              isBold ? 'font-bold' : 'font-normal'
+                            }`}
+                            style={{ color: cellColor || undefined }}
+                            spellCheck={false}
+                          />
+                        )}
                       )}
                     </div>
                   )