sam1902/Skwik
sam1902/Skwik
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/ResultViewer.vue
View File

@ -806,20 +806,25 @@ async function download() {
</CardContent> </CardContent>
</Card> </Card>
<!-- Corrected image with tools --> <!-- Corrected image with tools — full-bleed to use the whole page width
<Card> even though the surrounding column is capped at max-w-4xl. -->
<CardHeader> <div
<CardTitle class="text-base" class="relative left-1/2 w-screen -translate-x-1/2 px-4"
>Corrected Image</CardTitle >
> <Card>
</CardHeader> <CardHeader>
<CardContent> <CardTitle class="text-base"
<CorrectedImageViewer >Corrected Image</CardTitle
:image-url="resultUrl" >
:scale-px-per-mm="store.scalePxPerMm" </CardHeader>
/> <CardContent>
</CardContent> <CorrectedImageViewer
</Card> :image-url="resultUrl"
:scale-px-per-mm="store.scalePxPerMm"
/>
</CardContent>
</Card>
</div>
<!-- Download --> <!-- Download -->
<div class="flex flex-col items-center gap-3 pb-8"> <div class="flex flex-col items-center gap-3 pb-8">