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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user