From 47d5ae54eda7d1b9c028dc675eccf7badea90a2b Mon Sep 17 00:00:00 2001 From: Local Dev Date: Fri, 18 Sep 2026 08:22:50 +0200 Subject: [PATCH] =?UTF-8?q?style(potidaea):=20my-tx=20flex=20layout=20?= =?UTF-8?q?=E2=80=94=20content-tight=20cells,=20no=20hollow=20space?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- design/potidaea/app.html | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/design/potidaea/app.html b/design/potidaea/app.html index 8d49d33..0f168a9 100644 --- a/design/potidaea/app.html +++ b/design/potidaea/app.html @@ -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; }