diff --git a/packages/tesm-core/src/tesm_core/static/tesm_core/css/components.css b/packages/tesm-core/src/tesm_core/static/tesm_core/css/components.css index 20168bd..5b314a4 100644 --- a/packages/tesm-core/src/tesm_core/static/tesm_core/css/components.css +++ b/packages/tesm-core/src/tesm_core/static/tesm_core/css/components.css @@ -1208,6 +1208,12 @@ --tile-accent: var(--text-faint); position: relative; overflow: hidden; + /* Spalte, damit die Fusszeile unten haengen kann (siehe .tile__actions). + Die Kacheln eines Rasters sind gleich hoch, ihr Inhalt aber nicht: mal + fehlt der Switch, mal der Standort. Ohne diesen Halt stuenden die Knoepfe + in jeder Kachel auf einer anderen Hoehe -- und das Auge sucht sie. */ + display: flex; + flex-direction: column; padding: var(--sp-4); padding-left: calc(var(--sp-4) + 3px); border: 1px solid var(--border-subtle); @@ -1269,6 +1275,24 @@ color: var(--text-faint); } + /* Fusszeile der Kachel: links der Bildschirm, rechts der Neustart. + ``margin-top: auto`` schiebt sie an den unteren Rand -- unabhaengig + davon, wie viel darueber steht. Die beiden Eingriffe stehen damit in + jeder Kachel an derselben Stelle, und der eine liegt nicht dort, wo eben + noch der andere war. */ + .tile__actions { + display: flex; + align-items: center; + gap: var(--sp-2); + margin-top: auto; + padding-top: var(--sp-3); + } + .tile__actions > :last-child { margin-left: auto; } + /* Steht nur ein Knopf da, bleibt er links -- sonst spraenge der Neustart bei + einem Geraet ohne Bildschirmzugang an die Stelle, an der nebenan VNC + steht. Das Fuellstueck haelt den Platz. */ + .tile__spacer { flex: 1 1 auto; } + /* Marke und Karte stehen uebereinander im normalen Fluss. Vorher lag die Marke absolut positioniert hinter der Karte -- auf einem flachen Fenster schnitt die Karte mitten durch den Schriftzug und die Funktionszeile. Ein