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>
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

View File

@@ -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>