From 93b05f554cae802ec65968b5824731fb6c0132b2 Mon Sep 17 00:00:00 2001
From: Samuel Prevost <samuel@infinic.com>
Date: Sat, 25 Apr 2026 10:27:44 +0200
Subject: [PATCH] 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>
---
 src/components/ResultViewer.vue | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/components/ResultViewer.vue b/src/components/ResultViewer.vue
index b9ca991..51e5bd7 100644
--- a/src/components/ResultViewer.vue
+++ b/src/components/ResultViewer.vue
@@ -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">