tiny UI imrovments

client/src/app/chat-page.component.html

@@ -11,38 +11,28 @@
                 <span class="status-led" [class.status-led-ok]="indicatorTone(session.signalingState()) === 'ok'" [class.status-led-connecting]="indicatorTone(session.signalingState()) === 'connecting'" [class.status-led-offline]="indicatorTone(session.signalingState()) === 'offline'"></span>
                 <span>Signaling</span>
               </div>
-              <div class="status-indicator">
+              <button
+                class="status-indicator status-indicator-action"
+                type="button"
+                [disabled]="!canReconnectWebRtc()"
+                [attr.aria-label]="canReconnectWebRtc() ? 'Open WebRTC channel' : 'WebRTC channel status'"
+                [title]="canReconnectWebRtc() ? 'Open WebRTC channel' : 'WebRTC channel status'"
+                (click)="ensureConnection()"
+              >
                 <span class="status-led" [class.status-led-ok]="indicatorTone(webRtcState()) === 'ok'" [class.status-led-connecting]="indicatorTone(webRtcState()) === 'connecting'" [class.status-led-offline]="indicatorTone(webRtcState()) === 'offline'"></span>
                 <span>WebRTC</span>
-              </div>
+              </button>
             </div>
           } @else {
             <h1 class="h3 mb-1 mt-2">Not signed in</h1>
             <p class="small text-secondary mb-0">Return to the dashboard and sign in again.</p>
           }
         </div>
-
-        @if (peer(); as selectedPeer) {
-          <button
-            class="btn btn-outline-light"
-            type="button"
-            [disabled]="selectedPeer.channelState === 'open'"
-            (click)="ensureConnection()"
-          >
-            {{ selectedPeer.channelState === 'open' ? 'Connected' : 'Open channel' }}
-          </button>
-        }
       </div>
 
       <div class="chat-layout">
         <aside class="peer-sidebar">
-          <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
+
-            <div>
-              <h2 class="h5 mb-1">Connected peers</h2>
-              <p class="small text-secondary mb-0">Switch between active direct chats.</p>
-            </div>
-            <span class="peer-count">{{ session.peers().length }}</span>
-          </div>
 
           <div class="peer-list">
             @if (session.peers().length === 0) {

client/src/app/chat-page.component.scss

@@ -35,6 +35,27 @@
   color: var(--page-text-soft);
 }
 
+.status-indicator-action {
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.status-indicator-action:not(:disabled) {
+  color: var(--page-text);
+  cursor: pointer;
+}
+
+.status-indicator-action:not(:disabled):hover,
+.status-indicator-action:not(:disabled):focus-visible {
+  color: var(--accent-color);
+}
+
+.status-indicator-action:disabled {
+  cursor: default;
+  opacity: 1;
+}
+
 .status-led {
   width: 0.8rem;
   height: 0.8rem;
@@ -151,6 +172,7 @@
 .conversation {
   display: grid;
   gap: 0.85rem;
+  align-content: start;
   min-height: 24rem;
   max-height: calc(100dvh - 20rem);
   overflow: auto;
@@ -159,6 +181,7 @@
 
 .bubble {
   position: relative;
+  align-self: start;
   max-width: min(75%, 34rem);
   padding: 0.9rem 1rem;
   border-radius: 1.2rem;

client/src/app/chat-page.component.ts

@@ -140,6 +140,10 @@ export class ChatPageComponent {
     return 'offline';
   }
 
+  canReconnectWebRtc(): boolean {
+    return this.indicatorTone(this.webRtcState()) === 'offline';
+  }
+
   async switchPeer(peerId: string): Promise<void> {
     if (!peerId || peerId === this.peerId()) {
       return;