diff --git a/Changes.md b/Changes.md index 75bfd15..d8a8c7d 100644 --- a/Changes.md +++ b/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) diff --git a/public/static/app.css b/public/static/app.css index 5a6c30e..f0d0644 100644 --- a/public/static/app.css +++ b/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 – diff --git a/tests/e2e/specs/auswertungen.spec.js b/tests/e2e/specs/auswertungen.spec.js index 4c6577a..769993f 100644 --- a/tests/e2e/specs/auswertungen.spec.js +++ b/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