bch_qzjqnzgjz7w9tdflpz6u/deviant
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(potidaea): my-tx equal outer gaps, slightly tighter From ↔ To

Browse source 
Grid template changed from `auto 1fr 1fr auto` to `auto 3fr 2fr 3fr`:

  Pair (auto, left)     From (3fr)     To (2fr)     Time (3fr)

  • FROM and TIME tracks are each 3fr — the wider pair. The middle
    TO track is 2fr, a little narrower. Combined with right-aligned
    text in every data cell, the distance between column right edges
    reads: wide (Pair→From) · narrow (From→To) · wide (To→Time).
  • Every data cell keeps text-align: right + overflow: hidden +
    ellipsis, so any amount hugs the right of its own column and
    can't spill into the neighbour.

Measured live at panel width 580 px:
  Pair right edge         →  87 px
  From right edge         → 260 px
  To   right edge         → 380 px
  Time right edge         → 552 px

  Pair → From distance    → 173 px
  From → To  distance     → 120 px    (about 30 % less — "slightly
                                        less" per the brief)
  To   → Time distance    → 172 px    (matches Pair→From)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Local Dev 2026-09-18 08:17:50 +02:00
parent 2f454ea9ca
commit 79d33b758d
1 changed files with 12 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
design/potidaea/app.html
View file

@ -324,19 +324,20 @@
.od-mrow .m-time { text-align: right; color: var(--muted); font-size: 10px; letter-spacing: .04em; }
/* Four-column variant used by My Transactions: Pair | From | To | Time.
* Grid template: `auto 1fr 1fr auto` — the Pair column sizes to its
* text and anchors left, Time sizes to its clock and anchors right,
* and From / To split the middle in TWO EQUAL tracks. Each middle
* track is right-aligned, so the amount text hugs the right edge of
* its own column — From's amount ends around the 50% mark, To's ends
* around the panel's right shoulder, and neither can spill into the
* other's cell (overflow:hidden + ellipsis on both).
* Grid template: `auto 3fr 2fr 3fr` with 16 px gap. The FROM and TIME
* tracks are 3fr each (equal outer widths); the middle TO track is
* 2fr (a little narrower) so the visual gap between column right
* edges reads:
*
* BCH/ASM 0.12 BCH 120,000 ASM 01:26:30
* ^ pair ^ from ^ to ^ time
* Pair → From → To → Time
* equal wide slightly equal wide
* less
*
* 16 px gutter throughout. */
.od-mhead-4, .od-mrow-4 { grid-template-columns: auto 1fr 1fr auto; gap: 16px; }
* Every data cell is text-align: right and gets overflow:hidden +
* ellipsis, so the number hugs its own column's right edge and can't
* spill into the neighbour. Pair sits left-aligned in an auto track
* so it always fits its label width. */
.od-mhead-4, .od-mrow-4 { grid-template-columns: auto 3fr 2fr 3fr; gap: 16px; }
.od-mhead .m-from, .od-mhead .m-to { text-align: right; }
.od-mrow .m-from, .od-mrow .m-to { text-align: right; color: var(--ink-bright); font-family: var(--font-mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-mrow .m-to { color: #55e068; }