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; }