From f5a11cb22bfff76014faaa33933b400f09fef273 Mon Sep 17 00:00:00 2001
From: Fredrik Johansson <fredrik.johansson@intraphone.com>
Date: Thu, 25 Jun 2026 19:45:08 +0200
Subject: [PATCH] ui: fix message alignment, show self in peer list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 web/src/App.css                |  8 ++++----
 web/src/components/Sidebar.tsx | 12 ++++++++++--
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/web/src/App.css b/web/src/App.css
index cc8f1a0..421fedc 100644
--- a/web/src/App.css
+++ b/web/src/App.css
@@ -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-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; }
-.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-ts { color: var(--muted); font-size: 11px; min-width: 42px; flex-shrink: 0; }
-.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-ts { color: var(--muted); font-size: 11px; }
+.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-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 input { flex: 1; width: auto; }
 .compose button { flex-shrink: 0; }
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index c958f4f..9468676 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -87,9 +87,17 @@ export function Sidebar() {
       </div>
 
       <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 && (
-          <span className="sidebar-empty">no peers yet</span>
+          <span className="sidebar-empty">no peers connected</span>
         )}
         {connectedPeers.map(p => {
           const st = peerStatus[p.id]