Vier Ursachen fuer ein Bild, das gestaucht und verschoben aussah:
1. .main-content war bei 1600px gedeckelt. Auf einem 2000px-Schirm blieb
rechts ein leerer Streifen, waehrend acht Spalten sich links draengten.
Jetzt 2400px - ganz ohne Grenze wandert das Auge bei 3400px quer ueber
den Tisch.
2. Ohne table-layout:fixed verteilte der Browser die Breite nach Inhalt. Eine
lange Exception-Meldung oder ein Pfad wie
"public/api/bugtracker/v1/manage/index.php:407" zog die Titelspalte auf
und quetschte den Rest - je Zeile anders weit, weshalb die Spalten von
oben nach unten wanderten. Das war das "Verschobene".
Die schmalen Spalten haben jetzt feste Breiten, "Projekt & Titel" bekommt
bewusst keine und damit den Rest: Sie waechst mit dem Bildschirm, gemessen
1079px bei 2000px Viewport.
3. Die Aktionsknoepfe brachen um, weil die Zelle enger wurde als ihr Inhalt -
Stift oben, Lupe und Haken darunter. Feste Spaltenbreite plus nowrap.
4. min-width:0 auf .main-content. Der unscheinbare, aber wichtigere Teil:
body ist ein Flex-Container, .main-content also ein Flex-Element mit
min-width:auto - es weigerte sich, unter seine Inhaltsbreite zu
schrumpfen. Eine breite Tabelle schob deshalb die ganze SEITE quer, statt
im eigenen Behaelter zu scrollen, und beim Scrollen wanderte die
Seitenleiste aus dem Bild.
Der Titel wird per CSS nach zwei Zeilen gekuerzt statt per mb_strimwidth nach
90 Zeichen - eine feste Zeichenzahl ist auf einem breiten Schirm zu wenig und
auf einem schmalen zu viel. Der vollstaendige Text haengt im title=.
Nachgemessen im Browser gegen das echte Stylesheet, bei 1250px und 2000px:
Seite laeuft nicht mehr quer, die Tabelle bekommt bei Bedarf ihre eigene
Leiste, Knoepfe bleiben einreihig, 94% Breitenausnutzung.
Gilt fuer die Item-Liste und den Fehlerstrom - dieselbe Tabelle, dieselben
Ursachen.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
