marty/instantadpay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align downline rows into a grid (name | contact | date | action)

Browse Source 
Each row was an independent flex line, so variable-width emails threw the date
column out of alignment across rows. Now a CSS grid with a shared template keeps
the date and Message columns lined up; long names/emails truncate; responsive
stack on narrow screens.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-07 07:28:20 -05:00
parent 1363bd7b0b
commit 7fbf9add37
3 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/site.css
+8 -3
View File
@@ -397,10 +397,15 @@ textarea{resize:vertical;font:inherit}
/* ── downline lineage list ── */
.lin-lvl{margin:10px 0}
.lin-lvl>.cap{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.lin-row{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.lin-row .nm{font-weight:700;min-width:120px}
.lin-row .em{font-size:12px;color:var(--mint);overflow-wrap:anywhere}
.lin-row{display:grid;grid-template-columns:minmax(110px,1.2fr) minmax(0,2fr) auto auto;gap:6px 14px;
align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.lin-row .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lin-row .em{font-size:12px;color:var(--mint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lin-row .id{font-family:var(--mono);font-size:11px;color:var(--muted)}
.lin-row .dt{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lin-row .chat-msg-btn{justify-self:end}
@media (max-width:560px){.lin-row{grid-template-columns:1fr auto;gap:2px 10px}
.lin-row .em{grid-column:1/2}.lin-row .dt{grid-column:1/2;text-align:left}.lin-row .chat-msg-btn{grid-row:1/3;grid-column:2}}
/* ── solo composer: toolbar + contenteditable editor ── */
.ed-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.ed-bar button{background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);border-radius:8px;