From 6f86f872a9336d60bb0828027d37d88d314677e0 Mon Sep 17 00:00:00 2001
From: Aaron Roberts <aaronroberts@Aarons-MacBook-Air.local>
Date: Tue, 9 Jun 2026 18:10:39 +0100
Subject: [PATCH] Make image display significantly taller

Give the image+text row an explicit 65vh height instead of flex-1 inside
a viewport-locked container. Remove the overall height constraint so
metadata and commit rows sit naturally below with scroll if needed.
Image and textarea containers now use h-full to fill the fixed row height.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/App.jsx                  | 9 ++++-----
 frontend/src/components/JobsPanel.jsx | 7 +++----
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 4839366..105beb6 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -237,12 +237,11 @@ function App() {
               animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0, y: -20 }}
               className="flex flex-col gap-4"
-              style={{ height: 'calc(100vh - 9.5rem)' }}
             >
               {/* Image + Text */}
-              <div className="grid gap-6 flex-1 min-h-0" style={{ gridTemplateColumns: '3fr 2fr' }}>
+              <div className="grid gap-6" style={{ gridTemplateColumns: '3fr 2fr', height: '65vh' }}>
                 {imagePreview && typeof imagePreview === 'string' ? (
-                  <div className="glass rounded-2xl overflow-hidden flex items-center justify-center bg-black/20 min-h-0">
+                  <div className="glass rounded-2xl overflow-hidden flex items-center justify-center bg-black/20 h-full">
                     <img
                       src={imagePreview}
                       alt="Source"
@@ -250,11 +249,11 @@ function App() {
                     />
                   </div>
                 ) : (
-                  <div className="glass rounded-2xl flex items-center justify-center">
+                  <div className="glass rounded-2xl flex items-center justify-center h-full">
                     <p className="text-gray-500 text-sm">No preview</p>
                   </div>
                 )}
-                <div className="glass rounded-2xl p-4 flex flex-col min-h-0">
+                <div className="glass rounded-2xl p-4 flex flex-col h-full">
                   <p className="text-xs text-gray-400 mb-2 flex-shrink-0">
                     OCR Text <span className="text-purple-400">(edit before committing)</span>
                   </p>
diff --git a/frontend/src/components/JobsPanel.jsx b/frontend/src/components/JobsPanel.jsx
index 23b3040..803346a 100644
--- a/frontend/src/components/JobsPanel.jsx
+++ b/frontend/src/components/JobsPanel.jsx
@@ -107,7 +107,6 @@ function JobDetail({ jobId, onClose, onReviewed }) {
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -20 }}
       className="flex flex-col gap-4"
-      style={{ height: 'calc(100vh - 9.5rem)' }}
     >
       {/* Top bar */}
       <div className="flex items-center gap-4 flex-shrink-0">
@@ -142,8 +141,8 @@ function JobDetail({ jobId, onClose, onReviewed }) {
       {job && !loading && (
         <>
           {/* Image + Text */}
-          <div className="grid gap-6 flex-1 min-h-0" style={{ gridTemplateColumns: '3fr 2fr' }}>
-            <div className="glass rounded-2xl overflow-hidden flex items-center justify-center bg-black/20 min-h-0">
+          <div className="grid gap-6" style={{ gridTemplateColumns: '3fr 2fr', height: '65vh' }}>
+            <div className="glass rounded-2xl overflow-hidden flex items-center justify-center bg-black/20 h-full">
               <img
                 src={`${API_BASE}/jobs/${job.id}/image`}
                 alt="Job source"
@@ -151,7 +150,7 @@ function JobDetail({ jobId, onClose, onReviewed }) {
                 onError={e => { e.target.style.display = 'none' }}
               />
             </div>
-            <div className="glass rounded-2xl p-4 flex flex-col min-h-0">
+            <div className="glass rounded-2xl p-4 flex flex-col h-full">
               <p className="text-xs text-gray-400 mb-2 flex-shrink-0">
                 {isReviewed ? 'Reviewed Text' : 'OCR Text'}
                 <span className="text-purple-400 ml-1">(editable)</span>