From 514d1c2d4e0640fb723029c7855083b162d14bfb Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 7 Oct 2026 15:20:05 +0000 Subject: [PATCH] =?UTF-8?q?Kontrolle:=20Wortbruch=20in=20schmalen=20Spalte?= =?UTF-8?q?n=20nur=20noch=20bei=20Bedarf,=20Betr=C3=A4ge=20brechen=20nie?= =?UTF-8?q?=20um?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit overflow-wrap: anywhere wird break-word (Projektname 'Fachanwaltsseiten' bricht nicht mehr mitten im Wort); Beträge und Stunden der Projektliste stehen auf white-space: nowrap, damit das Eurozeichen nicht allein steht. Co-Authored-By: Claude Sonnet 5.5 --- src/components/auftraege/projektkonto.css | 4 +++- src/components/auftraege/rechnung-dialog.css | 10 +++++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/auftraege/projektkonto.css b/src/components/auftraege/projektkonto.css index 94901fd..d1d7b6a 100644 --- a/src/components/auftraege/projektkonto.css +++ b/src/components/auftraege/projektkonto.css @@ -3,7 +3,9 @@ .pk { container-type: inline-size; } .pk .pk-hinweis { margin: 0 0 8px; } .pk .pk-table th, .pk .pk-table td { vertical-align: top; } -.pk .pk-name, .pk .pk-table td .cell-sub { overflow-wrap: anywhere; } +.pk .pk-name, .pk .pk-table td .cell-sub { overflow-wrap: break-word; } +/* Beträge und Stunden brechen nie um: das € bleibt am Betrag */ +.pk .pk-table .num, .pk .pk-berechnet .cell-sub, .pk .pk-zeit .cell-sub { white-space: nowrap; } .pk .pk-table .num { font-variant-numeric: tabular-nums; } .pk .pk-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; } .pk .pk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } diff --git a/src/components/auftraege/rechnung-dialog.css b/src/components/auftraege/rechnung-dialog.css index 92a639f..83300d4 100644 --- a/src/components/auftraege/rechnung-dialog.css +++ b/src/components/auftraege/rechnung-dialog.css @@ -5,7 +5,7 @@ .rd-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .rd-facts.facts { margin: 0; } .seg.rd-seg { flex-wrap: wrap; max-width: 100%; justify-self: start; } -.rd-hint { margin: 0; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; } +.rd-hint { margin: 0; font-size: 13px; color: var(--text-2); overflow-wrap: break-word; } /* Positionen */ .rd-item { display: grid; grid-template-columns: minmax(0, 1fr) 80px 120px 110px auto; gap: 8px 12px; align-items: end; } @@ -28,17 +28,17 @@ .rd-blaetter { border-top: 1px solid var(--line); } .rd-blatt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; } .rd-blatt input { accent-color: var(--accent); width: 15px; height: 15px; margin-top: 3px; } -.rd-blatt-text { min-width: 0; overflow-wrap: anywhere; } +.rd-blatt-text { min-width: 0; overflow-wrap: break-word; } .rd-blatt-zeit { white-space: nowrap; font-variant-numeric: tabular-nums; } .rd-weiter { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } /* Vorschau der Rechnungszeilen */ .rd-lines { table-layout: fixed; } -.rd-lines .rd-line-text { overflow-wrap: anywhere; } +.rd-lines .rd-line-text { overflow-wrap: break-word; } .rd-lines .fin-amount { width: 7.5rem; } .rd-lines th.fin-amount { text-align: right; } .rd-line-input { width: 100%; min-width: 0; } -.rd-line-tail { display: block; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; } +.rd-line-tail { display: block; font-size: 13px; color: var(--text-2); overflow-wrap: break-word; } .rd-dim { opacity: 0.5; } /* nur für Screenreader sichtbar */ @@ -50,7 +50,7 @@ /* Rechnungstabelle (InvoiceTable): Spalten Projekt und Art. Zwei Klassen vor dem Elementnamen, damit diese Rasterflächen die Regel .fin-invoices tr aus global.css überstimmen (dieses Stylesheet steht davor im Bundle). */ -.fin-block .fin-inv-project { overflow-wrap: anywhere; } +.fin-block .fin-inv-project { overflow-wrap: break-word; } .fin-block .fin-inv-art { white-space: nowrap; } @container (max-width: 860px) { .fin-block .fin-invoices tr { grid-template-areas: "number status" "customer customer" "projekt art" "created due" "total remaining" "actions actions"; }