Scarriffle/Vorrania
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tabellen bleiben Tabellen; Karten erst auf schmalen Bildschirmen

Browse Source 
Uebersicht, Einheiten und Kategorien zeigten am Rechner die Karten-Ansicht
(Beschriftung links, Wert daneben), weil die Umschaltgrenze bei 700px lag und
neben diesen Bloecken noch etwas steht. Drei bis vier Spalten passen dort aber
locker nebeneinander.

- Grenze auf 480px gesenkt: Karten praktisch nur noch am Handy hochkant.
- .table-wrap faengt Zwischengroessen mit waagerechtem Scrollen ab, statt
  Inhalte abzuschneiden.
- Tooltip-Beschriftung ohne Fragezeichen-Cursor.

Geprueft: "npm run build" laeuft durch.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-07-23 08:07:28 +02:00
parent e4e22c7822
commit 546a6bfc90
1 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/styles.css
View File

@@ -241,7 +241,7 @@ td select { width: auto; min-width: 0; max-width: 100%; }
/* container-type: Die Tabelle richtet sich nach dem Platz, den sie wirklich
hat - nicht nach der Bildschirmbreite. So stellt sie sich auch um, wenn das
Fenster nur die halbe Bildschirmbreite einnimmt oder ein Block danebensteht. */
.table-wrap { max-width: 100%; container-type: inline-size; }
.table-wrap { max-width: 100%; container-type: inline-size; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th, .table td {
text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border);
@@ -268,7 +268,7 @@ td select { width: auto; min-width: 0; max-width: 100%; }
.cell-row { display: flex; align-items: center; gap: 6px; }
/* Beschriftung mit Erklaerung im Tooltip: die gepunktete Linie zeigt an, dass
dort etwas steht - so bleibt das Formular kurz, ohne Wissen zu verstecken. */
.tip { border-bottom: 1px dotted var(--border-strong); cursor: help; }
.tip { border-bottom: 1px dotted var(--border-strong); }
/* In Zahlenspalten sitzt der Inhalt rechts, passend zur Ausrichtung der Spalte. */
.table td.num .cell-row { justify-content: flex-end; }
.table tbody tr:last-child td { border-bottom: none; }
@@ -350,11 +350,12 @@ td select { width: auto; min-width: 0; max-width: 100%; }
.precision-pick { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-weight: 400; }
.precision-pick select { margin: 0; width: auto; padding-top: 3px; padding-bottom: 3px; font-size: 0.8rem; }
/* Hinweis beim Einlagern: welche Kategorie automatisch zugeordnet wird */
/* Wird es eng, ist eine Tabelle das falsche Mittel: Spalten quetschen sich,
Text wird abgeschnitten, und waagerechtes Scrollen in einem Block ist
unbrauchbar. Stattdessen wird jede Zeile zu einer Karte, in der jede Angabe
ihre Beschriftung aus data-label bekommt. */
@container (max-width: 700px) {
/* Karten statt Tabelle erst, wenn es wirklich eng wird (Handy hochkant).
Vorher lag die Grenze bei 700px - dadurch zeigten Uebersicht, Einheiten und
Kategorien schon am Rechner Karten, obwohl drei bis vier Spalten dort locker
nebeneinander passen. Dazwischen faengt waagerechtes Scrollen im Block ab,
damit nichts abgeschnitten wird. */
@container (max-width: 480px) {
.table thead { display: none; }
.table, .table tbody, .table tr, .table td { display: block; width: 100%; }
.table tr {