Design P6: Angebotsspalte mit Mindestbreite (col-offer), Statusspalte am Handy schmaler, Kundenspalte 7,5rem

Die Angebotstabelle brach bei 390 px gewoehnliche Woerter mitten im Wort
("Ansprechpartne-r", "Geschaeftsfuehru-ng"): die Spalte "Angebot" hatte keine
Mindestbreite und bekam nur etwa 103 px. Jetzt hat <th>Angebot</th> die Klasse
col-offer (min-width 8rem), col-status faellt bis 600 px auf 6rem, col-name
steigt auf 7,5rem ("Anlagentechnik" brach sonst in der Kundenspalte).
Bis 600 px summieren sich die Mindestbreiten auf 344 px in 358 px.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Sonnet 5.5 committed 2026-10-06 14:36:45 +00:00
1 parent 5e5093b7f2
commit 3e5839bee6
2 files changed
+7 -2

No files matched your search

+1 -1
View File
@@ -64,7 +64,7 @@ export default function OfferList({ customerId, reloadKey, onMessage, onChanged
<tr>
<th className="hide-md">Angelegt</th>
<th className="col-name">Kunde</th>
<th>Angebot</th>
<th className="col-offer">Angebot</th>
<th className="hide-sm">Gültig bis</th>
<th className="col-status">Status</th>
</tr>
+6 -1
View File
@@ -1222,7 +1222,12 @@ div.cell-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6p
@media (min-width: 861px) { .table-wrap th.col-status { min-width: 12rem; } }
/* Kundenspalte (E-Mail-Speicher, Angebote, Gutschriften): wird nicht schmaler als ein ganzer Name ("Physiotherapie"); die Aufgaben-, */
/* Angebots- oder Statusspalte ist lang und nimmt sonst fast die ganze Breite, und td bricht ueberall: am Handy stuende "Physiothe-rapie" in 65 px. */
.table-wrap th.col-name { min-width: 7rem; }
.table-wrap th.col-name { min-width: 7.5rem; }
/* Angebotsspalte (Angebote): braucht ebenfalls eine Mindestbreite, sonst bricht der lange Angebots- und Notiztext am Handy mitten im Wort */
/* ("Ansprechpartne-r", "Geschaeftsfuehru-ng" in 103 px). Bis 600 px passen 7,5rem (Kunde) + 8rem (Angebot) + 6rem (Status) in 358 px; */
/* die Kundenspalte braucht 7,5rem fuer "Anlagentechnik" (14 Zeichen), nur die Angebotstabelle hat col-status. */
.table-wrap th.col-offer { min-width: 8rem; }
@media (max-width: 600px) { .table-wrap th.col-status { min-width: 6rem; } }
/* ===== ENDE Kunden-Unterseiten (P6) ===== */
/* ===== KOMPAT (bis P10) ===== */