From c268ce419aa793fb1e5d282cebaae6786c42a875 Mon Sep 17 00:00:00 2001
From: Siavash Sameni <manwe@MacBook-Air.local>
Date: Mon, 6 Apr 2026 12:49:26 +0400
Subject: [PATCH] =?UTF-8?q?fix:=20relay=20dialog=20overflow=20=E2=80=94=20?=
 =?UTF-8?q?stack=20inputs,=20full-width=20Add=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Dialog fits within 360px window (was overflowing at 420px)
- Add inputs stacked: name + host:port in a row, "Add Relay" button below
- Text overflow with ellipsis on relay names and addresses
- Proper min-width: 0 on flex children to prevent overflow

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 desktop/index.html    |  8 +++++---
 desktop/src/style.css | 31 +++++++++++++++++++++++--------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/desktop/index.html b/desktop/index.html
index 10f52c5..c1ae769 100644
--- a/desktop/index.html
+++ b/desktop/index.html
@@ -134,9 +134,11 @@
           </div>
           <div id="relay-dialog-list" class="relay-dialog-list"></div>
           <div class="relay-add-row">
-            <input id="relay-add-name" type="text" placeholder="Name (e.g. EU-1)" />
-            <input id="relay-add-addr" type="text" placeholder="host:port" />
-            <button id="relay-add-btn" class="secondary-btn">Add</button>
+            <div class="relay-add-inputs">
+              <input id="relay-add-name" type="text" placeholder="Name" />
+              <input id="relay-add-addr" type="text" placeholder="host:port" />
+            </div>
+            <button id="relay-add-btn" class="primary">Add Relay</button>
           </div>
         </div>
       </div>
diff --git a/desktop/src/style.css b/desktop/src/style.css
index f60c428..7299885 100644
--- a/desktop/src/style.css
+++ b/desktop/src/style.css
@@ -158,9 +158,9 @@ body {
 
 .relay-menu-item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
 
-.relay-menu-item .relay-info { flex: 1; min-width: 0; }
-.relay-menu-item .relay-name { font-weight: 500; }
-.relay-menu-item .relay-addr { font-size: 11px; color: var(--text-dim); font-family: monospace; }
+.relay-menu-item .relay-info { flex: 1; min-width: 0; overflow: hidden; }
+.relay-menu-item .relay-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.relay-menu-item .relay-addr { font-size: 11px; color: var(--text-dim); font-family: monospace; overflow: hidden; text-overflow: ellipsis; }
 .relay-menu-item .relay-rtt { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
 
 .relay-manage-btn {
@@ -192,7 +192,8 @@ body {
 }
 
 .relay-dialog-card {
-  max-width: 420px;
+  max-width: 360px;
+  width: 100%;
 }
 
 .relay-dialog-list {
@@ -213,9 +214,9 @@ body {
 }
 
 .relay-dialog-item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
-.relay-dialog-item .relay-info { flex: 1; }
-.relay-dialog-item .relay-name { font-size: 13px; font-weight: 500; }
-.relay-dialog-item .relay-addr { font-size: 11px; color: var(--text-dim); font-family: monospace; }
+.relay-dialog-item .relay-info { flex: 1; min-width: 0; overflow: hidden; }
+.relay-dialog-item .relay-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.relay-dialog-item .relay-addr { font-size: 11px; color: var(--text-dim); font-family: monospace; overflow: hidden; text-overflow: ellipsis; }
 .relay-dialog-item .relay-rtt { font-size: 11px; color: var(--text-dim); margin-right: 4px; }
 
 .relay-dialog-item .remove {
@@ -231,8 +232,16 @@ body {
 
 .relay-add-row {
   display: flex;
-  gap: 6px;
+  flex-direction: column;
+  gap: 8px;
   margin-top: 12px;
+  border-top: 1px solid #333;
+  padding-top: 12px;
+}
+
+.relay-add-inputs {
+  display: flex;
+  gap: 6px;
 }
 
 .relay-add-row input {
@@ -244,10 +253,16 @@ body {
   font-size: 13px;
   outline: none;
   flex: 1;
+  min-width: 0;
 }
 
 .relay-add-row input:focus { border-color: var(--accent); }
 
+.relay-add-row .primary {
+  padding: 10px;
+  font-size: 14px;
+}
+
 .form-row {
   display: flex;
   gap: 16px;