From 9f65d427a08ce95d4a39a1103493a9082bacf7da Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <bede@tfm.ro>
Date: Wed, 22 Apr 2026 11:08:49 +0300
Subject: [PATCH] optimize: make debug panel more compact to fit screen

Layout changes:
- Reduced padding and margins throughout
- Changed from 3-column to 2-column layout
- Canvas + logs on right side (side-by-side)
- Smaller fonts and spacing
- Sticky header that stays in view
- Max-height with scrolling for modal
- Removed footer text to save space
- More efficient use of screen real estate

Now fits on most screen sizes even with large rotation angles.
---
 frontend/components/DebugRotationPanel.tsx | 64 +++++++++++-----------
 1 file changed, 31 insertions(+), 33 deletions(-)

diff --git a/frontend/components/DebugRotationPanel.tsx b/frontend/components/DebugRotationPanel.tsx
index e1a44b8f..03504af7 100644
--- a/frontend/components/DebugRotationPanel.tsx
+++ b/frontend/components/DebugRotationPanel.tsx
@@ -130,22 +130,22 @@ export function DebugRotationPanel({
   }, [imageLoaded, rotation, originalCropBounds, scaledDimensions]);
 
   return (
-    <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
-      <div className="bg-slate-900 border border-slate-700 rounded-lg shadow-2xl max-w-4xl w-full">
+    <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-2">
+      <div className="bg-slate-900 border border-slate-700 rounded-lg shadow-2xl max-w-5xl w-full max-h-[95vh] overflow-y-auto">
         {/* Header */}
-        <div className="p-4 border-b border-slate-700 flex items-center justify-between bg-slate-800">
-          <h2 className="text-xl font-bold text-white">🔧 Debug Rotation & Crop</h2>
+        <div className="p-2 border-b border-slate-700 flex items-center justify-between bg-slate-800 sticky top-0">
+          <h2 className="text-base font-bold text-white">🔧 Debug Rotation & Crop</h2>
           <button
             onClick={onClose}
             className="p-1 hover:bg-slate-700 rounded text-gray-400 hover:text-white transition"
           >
-            <X size={20} />
+            <X size={18} />
           </button>
         </div>
 
-        <div className="grid grid-cols-3 gap-4 p-6">
+        <div className="grid grid-cols-2 gap-2 p-3 auto-rows-max">
           {/* Left: Controls */}
-          <div className="space-y-4 bg-slate-800 p-4 rounded">
+          <div className="space-y-2 bg-slate-800 p-2 rounded">
             {/* Rotation Slider */}
             <div>
               <label className="block text-sm font-semibold text-white mb-2">
@@ -203,35 +203,33 @@ export function DebugRotationPanel({
             )}
           </div>
 
-          {/* Center: Canvas Preview */}
-          <div className="flex flex-col items-center justify-center bg-slate-800 p-4 rounded">
-            <h3 className="text-sm font-semibold text-white mb-2">Original Image with Crop Box</h3>
-            <div className="border border-slate-600 rounded flex items-center justify-center bg-black/50">
-              <canvas
-                ref={canvasRef}
-                className="max-w-full max-h-96 rounded"
-              />
+          {/* Center: Canvas Preview + Right: Logs */}
+          <div className="col-span-2 flex gap-2">
+            {/* Canvas */}
+            <div className="flex-1 flex flex-col bg-slate-800 p-2 rounded">
+              <h3 className="text-xs font-semibold text-white mb-1">Image Preview</h3>
+              <div className="border border-slate-600 rounded flex items-center justify-center bg-black/50 flex-1 min-h-72">
+                <canvas
+                  ref={canvasRef}
+                  className="max-w-full max-h-full rounded"
+                />
+              </div>
+              <div className="text-xs text-gray-400 mt-1 text-center">
+                <span>🟢 Crop  </span>
+                <span>🟠 Rotate</span>
+              </div>
             </div>
-            <div className="text-xs text-gray-400 mt-2 text-center">
-              <div>🟢 Green = Crop area</div>
-              <div>🟠 Orange = Rotation effect</div>
+
+            {/* Logs */}
+            <div className="w-64 bg-slate-800 p-2 rounded flex flex-col">
+              <h3 className="text-xs font-semibold text-white mb-1">Logs</h3>
+              <div className="bg-black text-green-400 p-2 rounded font-mono text-xs flex-1 overflow-y-auto border border-slate-700">
+                {logs.map((log, i) => (
+                  <div key={i} className="whitespace-pre-wrap">{log}</div>
+                ))}
+              </div>
             </div>
           </div>
-
-          {/* Right: Logs */}
-          <div className="bg-slate-800 p-4 rounded flex flex-col">
-            <h3 className="text-sm font-semibold text-white mb-2">Debug Logs</h3>
-            <div className="bg-black text-green-400 p-3 rounded font-mono text-xs flex-1 overflow-y-auto border border-slate-700">
-              {logs.map((log, i) => (
-                <div key={i}>{log}</div>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div className="p-4 border-t border-slate-700 bg-slate-800 text-center text-sm text-gray-300">
-          Find the rotation angle that makes the label text readable, then report the value back.
         </div>
       </div>
     </div>