Berichte: Tabelle mittig statt links ausgerichtet

Linksbündig wirkte die schmale Tabelle verloren neben dem zentrierten
Berichtskopf. Sie steht jetzt mittig unter Überschrift und Zeitraumzeile;
die Zahlenspalten bleiben in sich rechtsbündig. Der E2E-Test prüft, dass
links und rechts gleich viel Luft bleibt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Changes.md

@@ -5,8 +5,8 @@
 Ein Bericht mit zwei oder vier Spalten wurde bisher über die gesamte Fensterbreite gezogen –
 zwischen Bezeichnung und Betrag klaffte ein leeres Feld, und das Auge musste die Zeile
 zweimal überqueren. Die **Berichtstabellen nehmen jetzt nur den Platz, den ihre Spalten
-brauchen** (`width: auto`) und stehen links; erst wenn der Inhalt mehr verlangt, wachsen sie
-bis zur vollen Breite. Im Scrollrahmen `.breittabelle` (zwölf Monatsspalten) bleibt es beim
+brauchen** (`width: auto`) und stehen dabei mittig unter der Überschrift; erst wenn der
+Inhalt mehr verlangt, wachsen sie bis zur vollen Breite. Im Scrollrahmen `.breittabelle` (zwölf Monatsspalten) bleibt es beim
 bisherigen Verhalten: Die Tabelle darf hinausragen und waagerecht scrollen, statt umzubrechen.
 
 Dabei fiel auf, dass die Zahlenspalten **gar nicht rechtsbündig** standen: `.rechts` und
@@ -17,9 +17,9 @@ Ausrichtung jetzt ausdrücklich (`table.liste.bericht td.rechts`), sodass die le
 die Betragsspalte – ihre Zahlen rechtsbündig an ihrer eigenen Kante ausrichtet. Die übrigen
 Listen (Kontenübersicht, Wertpapiere) sind unverändert geblieben.
 
-Der neue E2E-Test misst beides: dass der Summenbericht deutlich schmaler bleibt als sein
-Rahmen, dass die letzte Spalte `text-align: right` hat und dass die Monatsansicht weiterhin
-breiter wird.
+Der neue E2E-Test misst alles drei: dass der Summenbericht deutlich schmaler bleibt als sein
+Rahmen und links wie rechts gleich viel Luft behält, dass die letzte Spalte
+`text-align: right` hat und dass die Monatsansicht weiterhin breiter wird.
 
 Nachgezogen: Der E2E-Test der eingeklappten Seitenleiste erwartete `toBeHidden()` für die
 Beschriftungen. Die sind aber mit Absicht nur aus dem Bild geschoben (`clip-path`, 1×1 Pixel)

public/static/app.css

@@ -1739,11 +1739,12 @@ table.bericht td { padding: .28rem .7rem; }
 
 /* Ein Bericht mit wenigen Spalten soll nicht über die ganze Breite gezogen
    werden: Die Tabelle nimmt nur den Platz, den ihre Spalten brauchen, und
-   steht links. Die Zahlenspalten bleiben in sich rechtsbündig (.rechts), die
-   letzte schließt damit bündig mit dem Tabellenrand ab. */
+   steht dabei mittig unter der Überschrift. Die Zahlenspalten bleiben in sich
+   rechtsbündig (.rechts), die letzte schließt bündig mit dem Tabellenrand ab. */
 table.liste.bericht {
     width: auto;
     max-width: 100%;
+    margin-inline: auto;
 }
 
 /* Im Scrollrahmen darf die Tabelle über die sichtbare Breite hinausgehen –

tests/e2e/specs/auswertungen.spec.js

@@ -153,9 +153,15 @@ test.describe('Auswertungen', () => {
 		const tabelle = page.locator('table.bericht')
 		const rahmen = page.locator('.breittabelle')
 
-		const tabelleBreit = (await tabelle.boundingBox()).width
-		const rahmenBreit = (await rahmen.boundingBox()).width
-		expect(tabelleBreit).toBeLessThan(rahmenBreit * 0.9)
+		const tabelleKasten = await tabelle.boundingBox()
+		const rahmenKasten = await rahmen.boundingBox()
+		const tabelleBreit = tabelleKasten.width
+		expect(tabelleBreit).toBeLessThan(rahmenKasten.width * 0.9)
+
+		// … und steht dabei mittig: links und rechts bleibt gleich viel Luft.
+		const links = tabelleKasten.x - rahmenKasten.x
+		const rechts = (rahmenKasten.x + rahmenKasten.width) - (tabelleKasten.x + tabelleBreit)
+		expect(Math.abs(links - rechts)).toBeLessThanOrEqual(1)
 
 		// Letzte Spalte: Zahlen rechtsbündig in ihrer eigenen Spalte.
 		// Die erste Zeile eines Abschnitts ist seine Überschrift (th) – deshalb