Zuletzt-Kachel: Werte jetzt wirklich spaltenbündig
- .teaser-Klasse auf die Kachel gesetzt (teaser()). - .teaser .leaf .v: min-width:72px (gleiche Spaltenbreite je Zeile). - .teaser .leaf .k: flex:1 1 auto, damit unterschiedlich lange Labels nicht mehr über justify-content:space-between den ganzen Rest der Zeile verschieben - vorher blieben .v-Boxen zwar gleich breit, saßen aber an unterschiedlichen X-Positionen. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -4375,6 +4375,25 @@ separation between both stacked value pairs.
|
||||
Verified across `.11`/`.12`: `node --check` clean each time, manifest bumped `2026.8.28.10` → `.11` → `.12`,
|
||||
`audi_ha_test` restarted and confirmed clean via log at each step.
|
||||
|
||||
**`.13`/`.14`: the `.12` gap fix wasn't the whole story - the owner sent a screenshot with the two value
|
||||
stacks bracketed at visibly different X positions.** Measured live rather than guessed: after `.12`,
|
||||
`.teaser .leaf .v` (added a `.teaser` class on the tile in `.13`, scoped `min-width:72px` to it) DID make
|
||||
both `.v` boxes the same 72px width, but their absolute `left`/`right` still differed by 56px
|
||||
(`getBoundingClientRect()` on both: row 1 at x=570-643, row 2 at x=627-699). Root cause: `.leaf` itself
|
||||
lays out its three children (`.k`/`.v`/chevron) via `justify-content:space-between`, and `.leaf .k` (the
|
||||
label) has no `flex-grow` - a longer label ("Hermann Mogler Mineralölg. GmbH" vs. the trip row's bare "→")
|
||||
leaves less leftover space, and `space-between` distributes that shrunk leftover differently, shifting the
|
||||
*entire* rest of the row including the now-equal-width `.v` block. Fixed by adding `.teaser .leaf .k{flex:1
|
||||
1 auto;min-width:0}` alongside the `.13` width fix - `.k` now fills all remaining space itself, so `.v`
|
||||
sits at a truly fixed offset from the right edge regardless of label length. Scoped to `.teaser` only
|
||||
(same reasoning as the `.13` width fix - `.leaf` is reused by many other list rows across the app where
|
||||
per-row value width is normal/desired, e.g. trip and refuel lists; forcing this there could look wrong).
|
||||
Verified live: `getBoundingClientRect()` on both real rendered `.v` blocks now reports byte-identical
|
||||
`left`/`right` (750/822 in both rows) - not just equal widths as after `.13` alone.
|
||||
|
||||
Verified: `node --check` clean at both steps, manifest bumped `2026.8.28.12` → `.13` → `.14`, `audi_ha_test`
|
||||
restarted and confirmed clean via log each time.
|
||||
|
||||
Verified live in `audi_ha_test` at every step (`.6` then `.7`), each time reading the actual rendered Setup
|
||||
popup fresh after a real restart (not a stale tab - confirmed via `performance.getEntriesByType('resource')`
|
||||
showing the new `?v=` served with a nonzero transfer size each time). Final state (`.7`), all 20 single-value
|
||||
|
||||
@@ -1187,7 +1187,7 @@ function badge() {
|
||||
function teaser() {
|
||||
if (!TRIPS.length && !FILLS.length) return "";
|
||||
const t = TRIPS[0], f = FILLS[0];
|
||||
return `<div class="tile"><span class="label">Zuletzt</span>
|
||||
return `<div class="tile teaser"><span class="label">Zuletzt</span>
|
||||
${t ? `<button class="leaf" style="padding-left:0" data-go="trip:${t.trip_id}">
|
||||
<span class="k">Letzte Fahrt<small>${esc(t.start_address || "")} → ${esc(t.end_address || "")}</small></span>
|
||||
<span class="v">${t.distance_km != null ? de(t.distance_km) + " km" : "offen"}<small>${t.status}</small></span>
|
||||
|
||||
@@ -471,6 +471,22 @@ button.sicherheitszeile:active { background: var(--tile-2); }
|
||||
.leaf .k small { font-size: 12px; color: var(--fg3); }
|
||||
.leaf .v { font-size: 13px; color: var(--fg2); text-align: right; display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
|
||||
.leaf .v small { font-size: 12px; color: var(--fg3); }
|
||||
/* .teaser (die "Zuletzt"-Kachel auf der Übersicht, teaser()): genau zwei
|
||||
Zeilen mit sehr unterschiedlich breiten Werten ("offen" vs. "51,59 l") -
|
||||
.v ist sonst flex:0 0 auto und damit genau so breit wie sein eigener
|
||||
Inhalt, wodurch die linke Kante des Wertes je Zeile unterschiedlich weit
|
||||
rechts beginnt (rechte Kante bleibt an der Chevron-Spalte gleich, das
|
||||
täuscht Ausrichtung nur vor). min-width sorgt für eine gemeinsame
|
||||
Spaltenbreite, damit beide Werte auf derselben linken Kante beginnen.
|
||||
Das allein reicht aber nicht: .leaf selbst verteilt seine drei Kinder
|
||||
(.k/.v/Chevron) per justify-content:space-between, und .k hat kein
|
||||
flex-grow - unterschiedlich lange Beschriftungen ("→" vs. "Hermann Mogler
|
||||
Mineralölg. GmbH") verschieben dadurch die GESAMTE restliche Zeile
|
||||
(.v + Chevron) um die Differenz, obwohl .v selbst jetzt gleich breit ist.
|
||||
.k bekommt deshalb flex:1, damit es den verbleibenden Platz füllt und .v
|
||||
dadurch wirklich immer am selben Abstand vom rechten Rand sitzt. */
|
||||
.teaser .leaf .k { flex: 1 1 auto; min-width: 0; }
|
||||
.teaser .leaf .v { min-width: 72px; }
|
||||
/* cursor/:active nur für echte .leaf-Buttons (data-go, navigieren bei Klick)
|
||||
- die Batterie-Messwertliste (vBatterieliste()) ist bewusst ein reines
|
||||
<div class="leaf">, keine Zeilennavigation, nur Wischen zum Löschen; sie
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"domain": "audi_dashboard",
|
||||
"name": "Audi Dashboard",
|
||||
"version": "2026.8.28.12",
|
||||
"version": "2026.8.28.14",
|
||||
"documentation": "https://gitea.nothaft.cloud/paul/audi-app/src/branch/main/README.md",
|
||||
"issue_tracker": "https://gitea.nothaft.cloud/paul/audi-app/issues",
|
||||
"codeowners": ["@paul"],
|
||||
|
||||
Reference in New Issue
Block a user