feat(result): full-bleed corrected-image card
Some checks failed
Deploy to GitHub Pages / build (push) Has been cancelled
Deploy to GitHub Pages / deploy (push) Has been cancelled

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:
Samuel Prevost 2026-04-25 10:27:44 +02:00
parent f3411a14bd
commit 93b05f554c

View File

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