explewd/waste-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

ui: fix message alignment, show self in peer list

Browse Source 
Messages now use a fixed grid (44px ts · 120px alias right-aligned · 1fr text)
instead of flex, so text always starts at the same column regardless of alias length.

Self shown at top of peer list with accent dot and bold name.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Fredrik Johansson
2026-06-25 19:45:08 +02:00
parent 478a0a32af
commit f5a11cb22b
2 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/App.css
View File

@@ -76,12 +76,12 @@ details summary { color: var(--muted); font-size: 12px; cursor: pointer; }
.message-pane { display: flex; flex-direction: column; height: 100%; min-width: 0; } .message-pane { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.message-pane-header { padding: 10px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; color: var(--text); } .message-pane-header { padding: 10px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; color: var(--text); }
.messages { flex: 1; overflow-y: auto; padding: 8px 0; display: flex; flex-direction: column; } .messages { flex: 1; overflow-y: auto; padding: 8px 0; display: flex; flex-direction: column; }
.message { display: flex; align-items: baseline; gap: 0; padding: 2px 16px; line-height: 1.5; } .message { display: grid; grid-template-columns: 44px 120px 1fr; align-items: baseline; gap: 0; padding: 2px 16px; line-height: 1.5; }
.message:hover { background: rgba(255,255,255,0.02); } .message:hover { background: rgba(255,255,255,0.02); }
.message-ts { color: var(--muted); font-size: 11px; min-width: 42px; flex-shrink: 0; } .message-ts { color: var(--muted); font-size: 11px; }
.message-alias { font-weight: 600; font-size: 13px; min-width: 100px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px 0 8px; flex-shrink: 0; } .message-alias { font-weight: 600; font-size: 13px; text-align: right; padding-right: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message.mine .message-alias { color: var(--accent); } .message.mine .message-alias { color: var(--accent); }
.message-text { flex: 1; word-break: break-word; font-size: 14px; color: var(--text); } .message-text { word-break: break-word; font-size: 14px; color: var(--text); }
.compose { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); } .compose { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); }
.compose input { flex: 1; width: auto; } .compose input { flex: 1; width: auto; }
.compose button { flex-shrink: 0; } .compose button { flex-shrink: 0; }

12
web/src/components/Sidebar.tsx
View File

@@ -87,9 +87,17 @@ export function Sidebar() {
</div> </div>
<div className="sidebar-section sidebar-peers"> <div className="sidebar-section sidebar-peers">
<span className="sidebar-label">Peers {connectedPeers.length > 0 && `· ${connectedPeers.length}`}</span> <span className="sidebar-label">Peers · {connectedPeers.length + 1}</span>
{/* Self */}
<div className="peer-row peer-row-self">
<span className="peer-dot" style={{ background: 'var(--accent)' }} />
<span className="peer-row-alias" style={{ fontWeight: 700 }}>{displayAlias || '…'}</span>
<span className="peer-row-id">{displayId.slice(0, 8)}</span>
</div>
{connectedPeers.length === 0 && ( {connectedPeers.length === 0 && (
<span className="sidebar-empty">no peers yet</span> <span className="sidebar-empty">no peers connected</span>
)} )}
{connectedPeers.map(p => { {connectedPeers.map(p => {
const st = peerStatus[p.id] const st = peerStatus[p.id]