From 4c8adf3f4aa466ad8c53f4299b1a93a0f7aaf586 Mon Sep 17 00:00:00 2001
From: Florian Wilde <fw@wildeflorian.de>
Date: Thu, 13 Aug 2026 16:59:49 +0200
Subject: [PATCH] Vorschau-Layout und Hintergrund der Vorschauflaeche
 verbessert
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Auf dem Handy stand die Vorschau ganz unten hinter der Gestaltung — man
musste an allen Reglern vorbeiscrollen, um den Code zu sehen. Die
Rasterplaetze werden jetzt ab "lg" ausdruecklich vergeben: auf dem Handy
folgt die Vorschau direkt auf die Eingabe, auf dem Desktop steht sie
weiterhin rechts daneben.

Das Schachbrettmuster hinter der Vorschau entfaellt. Es sollte
Transparenz sichtbar machen, aber jeder erzeugte Code bringt eine
deckende Hintergrundfarbe mit — es war nur Unruhe.
---
 src/app/globals.css             | 16 +++---------
 src/components/qr-generator.tsx | 45 +++++++++++++++++++--------------
 2 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 428be25..ea39130 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -26,18 +26,8 @@ body {
   outline-offset: 2px;
 }
 
-/* Schachbrett hinter der Vorschau — macht helle Hintergrundfarben sichtbar. */
+/* Neutrale Fläche hinter der Vorschau. Der QR-Code bringt seine eigene
+   Hintergrundfarbe mit — der leichte Grauton hebt auch weiße Codes ab. */
 .qr-canvas {
-  background-color: #fff;
-  background-image:
-    linear-gradient(45deg, #eef2f7 25%, transparent 25%),
-    linear-gradient(-45deg, #eef2f7 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #eef2f7 75%),
-    linear-gradient(-45deg, transparent 75%, #eef2f7 75%);
-  background-size: 16px 16px;
-  background-position:
-    0 0,
-    0 8px,
-    8px -8px,
-    -8px 0;
+  background-color: var(--color-slate-100);
 }
diff --git a/src/components/qr-generator.tsx b/src/components/qr-generator.tsx
index c1c35a1..624fd56 100644
--- a/src/components/qr-generator.tsx
+++ b/src/components/qr-generator.tsx
@@ -236,9 +236,13 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
         </div>
       </div>
 
+      {/*
+        Die Rasterplätze werden ab „lg“ ausdrücklich vergeben. Dadurch steht
+        die Vorschau auf dem Handy direkt unter der Eingabe — statt ganz unten
+        hinter der Gestaltung — und auf dem Desktop trotzdem rechts daneben.
+      */}
       <div className="grid grid-cols-1 items-start gap-6 lg:grid-cols-[minmax(0,1fr)_380px]">
-        {/* -------------------------------------------------- linke Spalte */}
-        <div className="space-y-6">
+        <div className="lg:col-start-1 lg:row-start-1">
           <Card>
             <CardTitle>Inhalt</CardTitle>
             {Form ? (
@@ -249,7 +253,25 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
               </Notice>
             )}
           </Card>
+        </div>
 
+        <div className="lg:sticky lg:top-6 lg:col-start-2 lg:row-start-1 lg:row-span-3 lg:self-start">
+          <Card>
+            <CardTitle>Vorschau</CardTitle>
+            <QrPreview
+              dataUrl={shownPreview?.dataUrl ?? null}
+              content={shownPreview?.content ?? null}
+              size={design.size}
+              error={shownPreviewError ?? downloadError}
+              loading={shownPreviewLoading}
+              downloadDisabledReason={downloadDisabledReason}
+              onDownload={handleDownload}
+              downloading={downloading}
+            />
+          </Card>
+        </div>
+
+        <div className="lg:col-start-1 lg:row-start-2">
           <Card>
             <CardTitle
               hint="Statisch: die Adresse steckt direkt im Code und lässt sich später nicht mehr ändern. Dynamisch: der Code zeigt auf eine Kurz-URL, deren Ziel du jederzeit anpassen kannst."
@@ -389,7 +411,9 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
               </div>
             ) : null}
           </Card>
+        </div>
 
+        <div className="lg:col-start-1 lg:row-start-3">
           <Card>
             <CardTitle hint="Farben, Größe und Fehlerkorrektur gelten für Vorschau und Download.">
               Gestaltung
@@ -397,23 +421,6 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
             <DesignPanel design={design} onChange={setDesign} />
           </Card>
         </div>
-
-        {/* ------------------------------------------------- rechte Spalte */}
-        <div className="lg:sticky lg:top-6">
-          <Card>
-            <CardTitle>Vorschau</CardTitle>
-            <QrPreview
-              dataUrl={shownPreview?.dataUrl ?? null}
-              content={shownPreview?.content ?? null}
-              size={design.size}
-              error={shownPreviewError ?? downloadError}
-              loading={shownPreviewLoading}
-              downloadDisabledReason={downloadDisabledReason}
-              onDownload={handleDownload}
-              downloading={downloading}
-            />
-          </Card>
-        </div>
       </div>
     </div>
   );