From 32d69c9945c840b5e7d12372c525c74908b75dd1 Mon Sep 17 00:00:00 2001
From: D4rkst3r <az3198284@gmail.com>
Date: Tue, 11 Aug 2026 19:45:37 +0200
Subject: [PATCH] fix: der Inhalt hat ueberall dieselbe Breite

Konto und Einstellungen standen auf max-w-2xl, alle anderen Seiten auf der
Containerbreite -- beim Wechseln sprang der Inhalt sichtbar. Ein Fehler beim
Bauen, kein Entwurf.

Die Breite steht jetzt an EINER Stelle (BREITE in App.tsx) und gilt fuer
Kopfzeile und Inhalt. Vorher stand sie zweimal da, und zwei Seiten setzten
zusaetzlich ihre eigene: drei Orte fuer eine Zahl, die immer gleich sein soll.

Formulare werden stattdessen INNERHALB ihrer Karte begrenzt. Das war der
eigentliche Grund fuer die Ausnahme -- ein Passwortfeld ueber 1280 Pixel sieht
albern aus. Nur gehoert diese Begrenzung ans Formular und nicht an die Seite.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 server/ui/src/App.tsx                 | 13 +++++++++++--
 server/ui/src/pages/Einstellungen.tsx |  2 +-
 server/ui/src/pages/Konto.tsx         |  4 ++--
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/server/ui/src/App.tsx b/server/ui/src/App.tsx
index 13cb289..7fee275 100644
--- a/server/ui/src/App.tsx
+++ b/server/ui/src/App.tsx
@@ -23,6 +23,15 @@ import { Meldungen } from './components/Meldungen'
 import { gehZu, usePfad } from './router'
 import { Avatar } from './components/Avatar'
 
+/** Die Breite des Inhalts — an EINER Stelle.
+ *
+ *  Sie stand vorher zweimal da (Kopfzeile und Inhalt), und zwei Seiten setzten
+ *  zusätzlich ihre eigene: dadurch waren Konto und Einstellungen schmaler als
+ *  der Rest, und die Kopfzeile lief über beiden anders. Formulare werden
+ *  stattdessen INNERHALB ihrer Karte begrenzt.
+ */
+const BREITE = 'mx-auto w-full max-w-7xl px-4'
+
 const seiten = [
     { pfad: '/', name: 'Start', kind: Gauge, Inhalt: Start },
     { pfad: '/galerie', name: 'Galerie', kind: Images, Inhalt: Galerie },
@@ -74,7 +83,7 @@ export function App() {
     return (
         <div className="flex min-h-full flex-col">
             <header className="sticky top-0 z-40 border-b border-rand bg-flaeche/80 backdrop-blur">
-                <div className="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-4 py-2.5">
+                <div className={`${BREITE} flex flex-wrap items-center gap-x-6 gap-y-2 py-2.5`}>
                     <a
                         href="/"
                         onClick={(e) => {
@@ -130,7 +139,7 @@ export function App() {
                 </div>
             </header>
 
-            <main key={aktiv.pfad} className="auftauchen mx-auto w-full max-w-7xl flex-1 px-4 py-5">
+            <main key={aktiv.pfad} className={`auftauchen ${BREITE} flex-1 py-5`}>
                 <Inhalt />
             </main>
 
diff --git a/server/ui/src/pages/Einstellungen.tsx b/server/ui/src/pages/Einstellungen.tsx
index 2c097e9..9dca259 100644
--- a/server/ui/src/pages/Einstellungen.tsx
+++ b/server/ui/src/pages/Einstellungen.tsx
@@ -14,7 +14,7 @@ import { DiscordKarte } from '../components/DiscordKarte'
  *  gelaufen ist. Diese Seite tut es. */
 export function Einstellungen() {
     return (
-        <div className="flex max-w-2xl flex-col gap-4">
+        <div className="flex flex-col gap-4">
             <SicherungKarte />
             <DiscordKarte />
         </div>
diff --git a/server/ui/src/pages/Konto.tsx b/server/ui/src/pages/Konto.tsx
index 691460a..3225936 100644
--- a/server/ui/src/pages/Konto.tsx
+++ b/server/ui/src/pages/Konto.tsx
@@ -45,7 +45,7 @@ export function Konto() {
             : 'über Discord angemeldet'
 
     return (
-        <div className="flex max-w-2xl flex-col gap-4">
+        <div className="flex flex-col gap-4">
             <Karte titel="Konto">
                 <div className="mb-4 flex items-center gap-3 border-b border-rand pb-4">
                     <Avatar name={user?.username ?? '?'} url={user?.avatar} groesse={44} />
@@ -64,7 +64,7 @@ export function Konto() {
                     </p>
                 )}
 
-                <form onSubmit={wechseln} className="flex flex-col gap-3">
+                <form onSubmit={wechseln} className="flex max-w-md flex-col gap-3">
                     <Feld
                         label="Aktuelles Passwort"
                         type="password"