aaron/rw-deepseek-ocr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make image display significantly taller

Browse Source 
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>
This commit is contained in:
Aaron Roberts
2026-06-09 18:10:39 +01:00
parent 7381ecd12e
commit 6f86f872a9
2 changed files with 7 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/App.jsx
View File

@@ -237,12 +237,11 @@ function App() {
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }} exit={{ opacity: 0, y: -20 }}
className="flex flex-col gap-4" className="flex flex-col gap-4"
style={{ height: 'calc(100vh - 9.5rem)' }}
> >
{/* Image + Text */} {/* 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' ? ( {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 <img
src={imagePreview} src={imagePreview}
alt="Source" alt="Source"
@@ -250,11 +249,11 @@ function App() {
/> />
</div> </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> <p className="text-gray-500 text-sm">No preview</p>
</div> </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"> <p className="text-xs text-gray-400 mb-2 flex-shrink-0">
OCR Text <span className="text-purple-400">(edit before committing)</span> OCR Text <span className="text-purple-400">(edit before committing)</span>
</p> </p>

7
frontend/src/components/JobsPanel.jsx
View File

@@ -107,7 +107,6 @@ function JobDetail({ jobId, onClose, onReviewed }) {
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }} exit={{ opacity: 0, y: -20 }}
className="flex flex-col gap-4" className="flex flex-col gap-4"
style={{ height: 'calc(100vh - 9.5rem)' }}
> >
{/* Top bar */} {/* Top bar */}
<div className="flex items-center gap-4 flex-shrink-0"> <div className="flex items-center gap-4 flex-shrink-0">
@@ -142,8 +141,8 @@ function JobDetail({ jobId, onClose, onReviewed }) {
{job && !loading && ( {job && !loading && (
<> <>
{/* Image + Text */} {/* 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' }}>
<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 <img
src={`${API_BASE}/jobs/${job.id}/image`} src={`${API_BASE}/jobs/${job.id}/image`}
alt="Job source" alt="Job source"
@@ -151,7 +150,7 @@ function JobDetail({ jobId, onClose, onReviewed }) {
onError={e => { e.target.style.display = 'none' }} onError={e => { e.target.style.display = 'none' }}
/> />
</div> </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"> <p className="text-xs text-gray-400 mb-2 flex-shrink-0">
{isReviewed ? 'Reviewed Text' : 'OCR Text'} {isReviewed ? 'Reviewed Text' : 'OCR Text'}
<span className="text-purple-400 ml-1">(editable)</span> <span className="text-purple-400 ml-1">(editable)</span>