From 7282a220d6bc4726f7c9a481a38cfe1c571d525c Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBookPro.fritz.box>
Date: Wed, 11 Mar 2026 09:46:25 +0100
Subject: [PATCH] fix: useMemo vor Early Returns verschieben (Rules of Hooks)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../ocr-overlay/OverlayReconstruction.tsx     | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/admin-lehrer/components/ocr-overlay/OverlayReconstruction.tsx b/admin-lehrer/components/ocr-overlay/OverlayReconstruction.tsx
index 2b712f5..94705e8 100644
--- a/admin-lehrer/components/ocr-overlay/OverlayReconstruction.tsx
+++ b/admin-lehrer/components/ocr-overlay/OverlayReconstruction.tsx
@@ -263,6 +263,18 @@ export function OverlayReconstruction({ sessionId, onNext }: OverlayReconstructi
     ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
     : ''
 
+  // Compute median cell height (in px) for consistent font sizing
+  // Must be before early returns (Rules of Hooks)
+  const medianCellHeightPx = useMemo(() => {
+    const imgWVal = imageNaturalSize?.w || 1
+    const imgHVal = imageNaturalSize?.h || 1
+    const cH = reconWidth * (imgHVal / imgWVal)
+    if (cells.length === 0 || cH === 0) return 40
+    const heights = cells.map(c => cH * (c.bboxPct.h / 100)).sort((a, b) => a - b)
+    const mid = Math.floor(heights.length / 2)
+    return heights.length % 2 === 0 ? (heights[mid - 1] + heights[mid]) / 2 : heights[mid]
+  }, [cells, reconWidth, imageNaturalSize])
+
   if (!sessionId) {
     return <div className="text-center py-12 text-gray-400">Bitte zuerst eine Session auswaehlen.</div>
   }
@@ -316,14 +328,6 @@ export function OverlayReconstruction({ sessionId, onNext }: OverlayReconstructi
   const imgH = imageNaturalSize?.h || 1
   const containerH = reconWidth * (imgH / imgW)
 
-  // Compute median cell height (in px) for consistent font sizing
-  const medianCellHeightPx = useMemo(() => {
-    if (cells.length === 0) return 40
-    const heights = cells.map(c => containerH * (c.bboxPct.h / 100)).sort((a, b) => a - b)
-    const mid = Math.floor(heights.length / 2)
-    return heights.length % 2 === 0 ? (heights[mid - 1] + heights[mid]) / 2 : heights[mid]
-  }, [cells, containerH])
-
   return (
     <div className="space-y-3">
       {/* Toolbar */}