feat(result): full-bleed corrected-image card
The corrected-image card was inscribed in the same max-w-4xl column as the controls, which capped the canvas at ~896px even on wide displays. Wrap just that one card in a full-bleed shell (relative left-1/2 -tx-1/2 w-screen) so it spans the viewport width while leaving the surrounding controls/diagnostics/download in their narrower column. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
f3411a14bd
commit
93b05f554c
@ -806,20 +806,25 @@ async function download() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Corrected image with tools -->
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle class="text-base"
|
||||
>Corrected Image</CardTitle
|
||||
>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CorrectedImageViewer
|
||||
:image-url="resultUrl"
|
||||
:scale-px-per-mm="store.scalePxPerMm"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<!-- Corrected image with tools — full-bleed to use the whole page width
|
||||
even though the surrounding column is capped at max-w-4xl. -->
|
||||
<div
|
||||
class="relative left-1/2 w-screen -translate-x-1/2 px-4"
|
||||
>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle class="text-base"
|
||||
>Corrected Image</CardTitle
|
||||
>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CorrectedImageViewer
|
||||
:image-url="resultUrl"
|
||||
:scale-px-per-mm="store.scalePxPerMm"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Download -->
|
||||
<div class="flex flex-col items-center gap-3 pb-8">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user