manawenuz/wz-phone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: relay dialog overflow — stack inputs, full-width Add button
Some checks failed
Build Release Binaries / build-amd64 (push) Has been cancelled
Details

Browse Source 
- 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>
This commit is contained in:
Siavash Sameni
2026-04-06 12:49:26 +04:00
parent 61b6e67610
commit c268ce419a
2 changed files with 28 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
desktop/index.html
View File

@@ -134,9 +134,11 @@
</div> </div>
<div id="relay-dialog-list" class="relay-dialog-list"></div> <div id="relay-dialog-list" class="relay-dialog-list"></div>
<div class="relay-add-row"> <div class="relay-add-row">
<input id="relay-add-name" type="text" placeholder="Name (e.g. EU-1)" /> <div class="relay-add-inputs">
<input id="relay-add-addr" type="text" placeholder="host:port" /> <input id="relay-add-name" type="text" placeholder="Name" />
<button id="relay-add-btn" class="secondary-btn">Add</button> <input id="relay-add-addr" type="text" placeholder="host:port" />
</div>
<button id="relay-add-btn" class="primary">Add Relay</button>
</div> </div>
</div> </div>
</div> </div>

31
desktop/src/style.css
View File

@@ -158,9 +158,9 @@ body {
.relay-menu-item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .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-info { flex: 1; min-width: 0; overflow: hidden; }
.relay-menu-item .relay-name { font-weight: 500; } .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; } .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-menu-item .relay-rtt { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.relay-manage-btn { .relay-manage-btn {
@@ -192,7 +192,8 @@ body {
} }
.relay-dialog-card { .relay-dialog-card {
max-width: 420px; max-width: 360px;
width: 100%;
} }
.relay-dialog-list { .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 .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.relay-dialog-item .relay-info { flex: 1; } .relay-dialog-item .relay-info { flex: 1; min-width: 0; overflow: hidden; }
.relay-dialog-item .relay-name { font-size: 13px; font-weight: 500; } .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; } .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 .relay-rtt { font-size: 11px; color: var(--text-dim); margin-right: 4px; }
.relay-dialog-item .remove { .relay-dialog-item .remove {
@@ -231,8 +232,16 @@ body {
.relay-add-row { .relay-add-row {
display: flex; display: flex;
gap: 6px; flex-direction: column;
gap: 8px;
margin-top: 12px; margin-top: 12px;
border-top: 1px solid #333;
padding-top: 12px;
}
.relay-add-inputs {
display: flex;
gap: 6px;
} }
.relay-add-row input { .relay-add-row input {
@@ -244,10 +253,16 @@ body {
font-size: 13px; font-size: 13px;
outline: none; outline: none;
flex: 1; flex: 1;
min-width: 0;
} }
.relay-add-row input:focus { border-color: var(--accent); } .relay-add-row input:focus { border-color: var(--accent); }
.relay-add-row .primary {
padding: 10px;
font-size: 14px;
}
.form-row { .form-row {
display: flex; display: flex;
gap: 16px; gap: 16px;