From 7fbf9add37cc70d49776b72f27ce08eee4e3d885 Mon Sep 17 00:00:00 2001 From: martbost Date: Mon, 7 Sep 2026 07:28:20 -0500 Subject: [PATCH] Align downline rows into a grid (name | contact | date | action) 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 --- public/assets/my.js | 2 +- public/assets/site.css | 11 ++++++++--- public/my.html | 8 ++++---- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/public/assets/my.js b/public/assets/my.js index b073a20..2b1929f 100644 --- a/public/assets/my.js +++ b/public/assets/my.js @@ -806,7 +806,7 @@ '
Level ' + L.level + ' · ' + L.members.length + (L.level === 1 ? ' direct' : '') + '
' + L.members.map(m => '
' + esc(m.name) + '' + (m.email ? '' + esc(m.email) + '' : '#' + m.memberId + '') - + '' + new Date(m.joined).toLocaleDateString() + '' + + '' + new Date(m.joined).toLocaleDateString() + '' + (m.email ? '' : '') + '
').join('') + '
').join(''); diff --git a/public/assets/site.css b/public/assets/site.css index 31ee113..8b33446 100644 --- a/public/assets/site.css +++ b/public/assets/site.css @@ -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; diff --git a/public/my.html b/public/my.html index a7bafe9..f52fe40 100644 --- a/public/my.html +++ b/public/my.html @@ -4,7 +4,7 @@ Member area | InstantAdPay - + @@ -641,9 +641,9 @@ - + - - + +