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

style(potidaea): my-tx flex layout — content-tight cells, no hollow space

Browse source 
Previous grid `auto 3fr 2fr 3fr` made each data column much wider than
its own text — the amount ("0.12 BCH") sat right-aligned inside a
150-px track, so 100 px of empty column-space stretched to its LEFT.
That empty space is why the numbers read as center-aligned: the eye
saw the value floating in the middle of a wide track, not hugging any
edge.

New layout: display: flex + justify-content: space-between + gap: 4 px.
Each cell hugs its own text width — no hollow left-side. The four
cells distribute across the panel: Pair on the far left, Time on the
far right, From / To centered between them. `margin-left: -28 px` on
the To cell pulls it a little closer to From so the two amounts read
as coupled without touching.

Measured live at panel width 580 px:
  Pair    →  46 px wide (BCH/ASM)
  From    →  53 px wide (0.12 BCH)
  To      →  73 px wide (120,000 ASM)
  Time    →  62 px wide (08:21:31)

Distance between cell right edges:
  Pair → From    → 155 px
  From → To      → 146 px   (~10 px less — the "slightly less" gap)
  To   → Time    → 164 px

Every amount now sits tight against its own content bounds, so the
"right-alignment" the eye is looking for is visible — the amount ends
exactly where the visible cell ends.

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

29
design/potidaea/app.html
View file

@ -324,20 +324,25 @@
.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 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:
* FLEX layout (not grid) so each cell hugs its own text width — no
* hollow left-side of a wide track that made the amounts look
* center-aligned. justify-content: space-between distributes the four
* cells across the panel: Pair on the left, Time on the right, From /
* To in the middle. A negative margin-left on the To cell pulls it a
* little closer to From so the pair reads as coupled without being
* cramped.
*
* Pair → From → To → Time
* equal wide slightly equal wide
* less
* BCH/ASM 0.12 BCH 120,000 ASM 08:16:33
* ^ pair ^ from ^ to ^ time
* wide less-wide wide
*
* 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; }
* Right-aligned text only matters when the container is wider than
* its content — but in this flex layout every cell is content-sized
* so the amount naturally hugs the right edge of what the eye reads
* as its "column". */
.od-mhead-4, .od-mrow-4 { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.od-mhead-4 .m-price, .od-mrow-4 .m-price { text-align: left; }
.od-mhead-4 .m-to, .od-mrow-4 .m-to { margin-left: -28px; }
.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; }