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;
+  padding: clamp(4px, 0.5vw, 8px);
-  height: 100%;
   aspect-ratio: 1 / 1;
+  flex-shrink: 0;
 
   background-color: unset;
 
-  border: solid rgb(255 255 255 / 0.1) 3px;
+  border: solid rgb(255 255 255 / 0.1) clamp(1px, 0.3vw, 3px);
-  border-radius: 10px;
+  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;
+    padding: clamp(6px, 0.8vw, 12px);
-    margin: 16px;
+    margin: clamp(6px, 0.8vw, 12px);
     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(4px, 0.8vw, 8px);
     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;
+    }
   }
 }
 

gui/src/app.rs

@@ -341,79 +341,69 @@ pub fn ControlView(config: Resource<ClientConfig>) -> Element {
     let connection_status = match &*status.read() {
         Connecting => rsx! {
             div {
-                style: "color: \"{connecting_color}\";",
+                class: "connection_status",
-                span {
+                style: "color: {connecting_color};",
-                    class: "material-symbols-outlined",
+                div {
-                    style: "vertical-align: middle; font-size: 30px;",
+                    span {
-                    "signal_cellular_alt_2_bar"
+                        class: "material-symbols-outlined",
-                }
+                        "signal_cellular_alt_2_bar"
-                span {
+                    }
-                    style: "width: 5px; display: inline-block;"
+                    span {
-                }
+                        class: "status_text",
-                span {
+                        " Connecting"
-                    style: "vertical-align: middle; font-size: 30px;",
+                    }
-                    "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;"
+                        class: "status_text",
-                    }
+                        " Connected"
-                    span {
-                        style: "vertical-align: middle; font-size: 25px;",
-                        "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}\";",
+                class: "connection_status",
-                span {
+                style: "color: {disconnected_color};",
-                    class: "material-symbols-outlined",
+                div {
-                    style: "vertical-align: middle;",
+                    span {
-                    "signal_disconnected"
+                        class: "material-symbols-outlined",
-                }
+                        "signal_disconnected"
-                span {
+                    }
-                    style: "width: 5px; display: inline-block;"
+                    span {
-                }
+                        class: "status_text",
-                span {
+                        " Disconnected"
-                    style: "vertical-align: middle;",
+                    }
-                    "Disconnected"
                 }
             }
         },
         Failed(_) => rsx! {
             div {
-                style: "color: \"{failed_color}\";",
+                class: "connection_status",
-                span {
+                style: "color: {failed_color};",
-                    class: "material-symbols-outlined",
+                div {
-                    style: "vertical-align: middle;",
+                    span {
-                    "error"
+                        class: "material-symbols-outlined",
-                }
+                        "error"
-                span {
+                    }
-                    style: "width: 5px; display: inline-block;"
+                    span {
-                }
+                        class: "status_text",
-                span {
+                        " Failed"
-                    style: "vertical-align: middle;",
+                    }
-                    "Failed"
                 }
             }
         },
@@ -445,16 +435,17 @@ pub fn ControlView(config: Resource<ClientConfig>) -> 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" }