From 990e1dbe86315014d8c26b0fb363cda9f5bb0471 Mon Sep 17 00:00:00 2001
From: Thomas Peterson <info@thomas-peterson.de>
Date: Tue, 9 Jun 2026 18:18:12 +0200
Subject: [PATCH] UI: Branding-Seite Breite begrenzen (Layout-Fix)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Grid max-width 940px + schmalere Farb-/Slogan-Felder, damit die Karte auf
breiten Monitoren nicht über die ganze Fläche zieht.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/views/BrandingView.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/BrandingView.vue b/frontend/src/views/BrandingView.vue
index 1e511b2..33e3b10 100644
--- a/frontend/src/views/BrandingView.vue
+++ b/frontend/src/views/BrandingView.vue
@@ -131,7 +131,7 @@ onMounted(load)
         </div>
 
         <h3 style="margin-top:1.6rem">Slogan</h3>
-        <input class="input" v-model="data.tagline" maxlength="120" placeholder="z. B. Ihre Druckerei vor Ort" />
+        <input class="input slogan-input" v-model="data.tagline" maxlength="120" placeholder="z. B. Ihre Druckerei vor Ort" />
 
         <p v-if="error" class="error" style="margin-top:1rem">{{ error }}</p>
         <p v-if="saved" class="ok" style="margin-top:1rem">Gespeichert.</p>
@@ -155,7 +155,7 @@ onMounted(load)
 <style scoped>
 .page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.4rem; }
 .page-head .muted { margin: .2rem 0 0; }
-.grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.2rem; align-items: start; }
+.grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; max-width: 940px; }
 .card h3 { font-size: .95rem; margin-bottom: .7rem; }
 .sm { font-size: .8rem; }
 .error { color: var(--danger); font-size: .88rem; }
@@ -167,7 +167,8 @@ onMounted(load)
 .logo-actions { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
 .logo-actions .muted { margin: .2rem 0 0; }
 
-.colors { display: flex; flex-direction: column; gap: .7rem; }
+.colors { display: flex; flex-direction: column; gap: .7rem; max-width: 440px; }
+.slogan-input { max-width: 440px; }
 .color { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; font-weight: 600; }
 .swatch { display: inline-flex; align-items: center; gap: .6rem; }
 .swatch input[type=color] { width: 38px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; padding: 0; }