From 6df5626d6fadb4ebc26a4635195b2c298c465223 Mon Sep 17 00:00:00 2001 From: Samuel Warfield Date: Mon, 12 Jan 2026 15:48:49 -0700 Subject: [PATCH 1/2] Vibe coded some UI scaling so that the buttons always work. --- gui/assets/main.scss | 105 ++++++++++++++++++++++++++++++++++++++----- gui/src/app.rs | 93 +++++++++++++++++--------------------- 2 files changed, 137 insertions(+), 61 deletions(-) diff --git a/gui/assets/main.scss b/gui/assets/main.scss index 0b4cc09..785afbc 100644 --- a/gui/assets/main.scss +++ b/gui/assets/main.scss @@ -168,26 +168,68 @@ a:visited { background-color: oklch(0.53 0.1431 264.18); border-radius: 50%; aspect-ratio: 1 / 1; + flex-shrink: 0; + + .material-symbols-outlined { + font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; + } } .button_row { display: flex; - gap: 10px; + gap: clamp(4px, 1vw, 10px); + align-items: center; + flex-wrap: nowrap; + min-height: 0; .spacer { flex-grow: 1; + flex-shrink: 1; + min-width: 0; + } + + .connection_status { + display: flex; + flex-direction: column; + min-width: 0; + flex-shrink: 1; + + .material-symbols-outlined { + font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; + vertical-align: middle; + } + } + + .user_info { + display: flex; + flex-direction: column; + min-width: 0; + overflow: hidden; + flex-shrink: 1; + + .user_name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .user_data { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } } .toggle_button { - padding: 8px; - height: 100%; + padding: clamp(4px, 0.5vw, 8px); aspect-ratio: 1 / 1; + flex-shrink: 0; background-color: unset; - border: solid rgb(255 255 255 / 0.1) 3px; - border-radius: 10px; + border: solid rgb(255 255 255 / 0.1) clamp(1px, 0.3vw, 3px); + border-radius: clamp(4px, 0.8vw, 10px); color: rgb(255 255 255 / 50%); transition: all 0.5s ease-in-out; @@ -200,7 +242,6 @@ a:visited { .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; vertical-align: middle; - font-size: 35px; } } @@ -245,16 +286,60 @@ a:visited { } &_control_box { - padding: 16px; - margin: 16px; + padding: clamp(8px, 1.5vw, 16px); + margin: clamp(8px, 1.5vw, 16px); background-color: var(--light-bg-color); - border-radius: 10px; + border-radius: clamp(6px, 1vw, 10px); overflow: hidden; grid-area: control; display: flex; - gap: 10px; + gap: clamp(6px, 1vw, 10px); flex-direction: column; + + // Dynamic font sizing for control elements + --control-icon-size: clamp(16px, 2.5vw, 30px); + --control-text-size: clamp(12px, 2vw, 25px); + --control-small-text-size: clamp(10px, 1.5vw, 20px); + --user-icon-size: clamp(24px, 4vw, 45px); + --toggle-icon-size: clamp(18px, 3vw, 35px); + + .connection_status { + .material-symbols-outlined { + font-size: var(--control-icon-size); + } + .status_text { + font-size: var(--control-text-size); + } + .channel_text { + font-size: var(--control-small-text-size); + } + } + + .user_edit_button { + .material-symbols-outlined { + font-size: var(--user-icon-size); + } + } + + .user_info { + .user_name { + font-size: var(--control-text-size); + } + .user_data { + font-size: var(--control-small-text-size); + } + } + + .toggle_button { + .material-symbols-outlined { + font-size: var(--toggle-icon-size); + } + } + + hr { + margin: 0; + } } } diff --git a/gui/src/app.rs b/gui/src/app.rs index 22d76d1..cca6638 100644 --- a/gui/src/app.rs +++ b/gui/src/app.rs @@ -341,79 +341,69 @@ pub fn ControlView(config: Resource) -> Element { let connection_status = match &*status.read() { Connecting => rsx! { div { - style: "color: \"{connecting_color}\";", - span { - class: "material-symbols-outlined", - style: "vertical-align: middle; font-size: 30px;", - "signal_cellular_alt_2_bar" - } - span { - style: "width: 5px; display: inline-block;" - } - span { - style: "vertical-align: middle; font-size: 30px;", - "Connecting" + class: "connection_status", + style: "color: {connecting_color};", + div { + span { + class: "material-symbols-outlined", + "signal_cellular_alt_2_bar" + } + span { + class: "status_text", + " Connecting" + } } } }, Connected => rsx! { div { + class: "connection_status", div { - style: "color: \"{connected_color}\";", + style: "color: {connected_color};", span { class: "material-symbols-outlined", - style: "vertical-align: middle; font-size: 30px;", "signal_cellular_alt" } span { - style: "width: 5px; display: inline-block;" - } - span { - style: "vertical-align: middle; font-size: 25px;", - "Connected" + class: "status_text", + " Connected" } } div { - span { style: "width: 3px; display: inline-block;"} + class: "channel_text", span { "{current_channel_name}" } - if let Some(proxy_url) = proxy_url { - span { " — " } - span { "{proxy_url}" } - } } } }, Disconnected => rsx! { div { - style: "color: \"{disconnected_color}\";", - span { - class: "material-symbols-outlined", - style: "vertical-align: middle;", - "signal_disconnected" - } - span { - style: "width: 5px; display: inline-block;" - } - span { - style: "vertical-align: middle;", - "Disconnected" + class: "connection_status", + style: "color: {disconnected_color};", + div { + span { + class: "material-symbols-outlined", + "signal_disconnected" + } + span { + class: "status_text", + " Disconnected" + } } } }, Failed(_) => rsx! { div { - style: "color: \"{failed_color}\";", - span { - class: "material-symbols-outlined", - style: "vertical-align: middle;", - "error" - } - span { - style: "width: 5px; display: inline-block;" - } - span { - style: "vertical-align: middle;", - "Failed" + class: "connection_status", + style: "color: {failed_color};", + div { + span { + class: "material-symbols-outlined", + "error" + } + span { + class: "status_text", + " Failed" + } } } }, @@ -445,16 +435,17 @@ pub fn ControlView(config: Resource) -> Element { class: "user_edit_button", span { class: "material-symbols-outlined", - style: "color: oklch(0.65 0.2245 28.06); font-size: 45px; font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;", + style: "color: oklch(0.65 0.2245 28.06);", "person_edit" } } div { + class: "user_info", div { - span { style: "font-size: 25px;", "{name}" } + span { class: "user_name", "{name}" } } div { - span { style: "font-size: 20px; color: gray;", "some data" } + span { class: "user_data", "some data" } } } span { class: "spacer" } -- 2.52.0 From 5585304d2218d50fbd86f18f90f35e98d7eb3c78 Mon Sep 17 00:00:00 2001 From: Samuel Warfield Date: Mon, 12 Jan 2026 16:19:18 -0700 Subject: [PATCH 2/2] Scale box bounderies --- gui/assets/main.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/gui/assets/main.scss b/gui/assets/main.scss index 785afbc..4e7f13c 100644 --- a/gui/assets/main.scss +++ b/gui/assets/main.scss @@ -286,15 +286,15 @@ a:visited { } &_control_box { - padding: clamp(8px, 1.5vw, 16px); - margin: clamp(8px, 1.5vw, 16px); + padding: clamp(6px, 0.8vw, 12px); + margin: clamp(6px, 0.8vw, 12px); background-color: var(--light-bg-color); border-radius: clamp(6px, 1vw, 10px); overflow: hidden; grid-area: control; display: flex; - gap: clamp(6px, 1vw, 10px); + gap: clamp(4px, 0.8vw, 8px); flex-direction: column; // Dynamic font sizing for control elements -- 2.52.0