From fd590e5e1040a900ad04f512c1c1fd584cbfdc51 Mon Sep 17 00:00:00 2001
From: WolverinDEV <git@did.science>
Date: Thu, 7 Jan 2021 11:13:24 +0100
Subject: [PATCH] Correctly adjusting the channel connection handler list to
 the current font size

---
 .../connection-handler-list/Renderer.scss     | 31 ++++++++++++-------
 .../connection-handler-list/Renderer.tsx      | 17 +++++-----
 2 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/shared/js/ui/frames/connection-handler-list/Renderer.scss b/shared/js/ui/frames/connection-handler-list/Renderer.scss
index 086339a6..e3d9c3ad 100644
--- a/shared/js/ui/frames/connection-handler-list/Renderer.scss
+++ b/shared/js/ui/frames/connection-handler-list/Renderer.scss
@@ -12,7 +12,7 @@
     transition: all $animation_length ease-in-out;
     &.shown {
         margin-top: -4px;
-        height: 24px;
+        height: 1.8em;
 
         transition: all $animation_length ease-in-out;
     }
@@ -109,25 +109,34 @@
         padding-left: 5px;
         padding-right: 5px;
 
-        height: 24px;
+        height: 1.8em;
         overflow: hidden;
 
-        border-bottom: 1px solid transparent;
+        border-bottom: .075em solid transparent;
         @include transition(all ease-in-out $button_hover_animation_time, opacity ease-in-out 0);
 
         .icon {
-            width: 16px;
-            height: 16px;
+            height: 1em;
+            width: 1em;
+
+            display: flex;
+            flex-direction: column;
+            justify-content: stretch;
 
             align-self: center;
             margin-right: 5px;
+
+            > img {
+                flex-grow: 1;
+            }
         }
 
         .name {
             color: #a8a8a8;
+            line-height: 1.2em;
 
             align-self: center;
-            margin-right: 20px;
+            margin-right: 1.2em;
 
             position: relative;
 
@@ -137,8 +146,8 @@
         }
 
         .buttonClose {
-            width: 16px;
-            height: 16px;
+            width: 1.1em;
+            height: 1.1em;
 
             position: absolute;
             right: 5px;
@@ -162,7 +171,7 @@
                     position: absolute;
                     left: 0;
                     top: 0;
-                    background: linear-gradient(to right, transparent calc(100% - 50px), #1e1e1e calc(100% - 25px));
+                    background: linear-gradient(to right, transparent calc(100% - 3.5em), #1e1e1e calc(100% - 1.5em));
                 }
             }
         }
@@ -171,7 +180,7 @@
             background-color: #242425;
 
             &.cutoffName .name:before {
-                background: linear-gradient(to right, transparent calc(100% - 50px), #242425 calc(100% - 25px));
+                background: linear-gradient(to right, transparent calc(100% - 3.5em), #242425 calc(100% - 1.5em));
             }
         }
 
@@ -180,7 +189,7 @@
             background-color: #2d2f32;
 
             &.cutoffName .name:before {
-                background: linear-gradient(to right, transparent calc(100% - 50px), #2d2f32 calc(100% - 25px));
+                background: linear-gradient(to right, transparent calc(100% - 3.5em), #2d2f32 calc(100% - 1.5em));
             }
         }
 
diff --git a/shared/js/ui/frames/connection-handler-list/Renderer.tsx b/shared/js/ui/frames/connection-handler-list/Renderer.tsx
index 91c4a247..92fa5270 100644
--- a/shared/js/ui/frames/connection-handler-list/Renderer.tsx
+++ b/shared/js/ui/frames/connection-handler-list/Renderer.tsx
@@ -35,26 +35,29 @@ const ConnectionHandler = React.memo((props: { handlerId: string, mode: Connecti
         setStatus(event.status);
     });
 
-    let displayedName;
+    let displayedName, displayedNameTitle;
     let cutoffName = false;
     let voiceReplaying = false;
-    let icon = <ClientIconRenderer icon={ClientIcon.ServerGreen} key={"default"} />;
+    let icon = <ClientIconRenderer icon={ClientIcon.ServerGreen} key={"default"} className={cssStyle.icon} />;
     if(status === "loading") {
-        displayedName = tr("loading status");
+        displayedName = displayedNameTitle = tr("loading status");
     } else {
         switch (status.connectionState) {
             case "connected":
                 cutoffName = status.handlerName.length > 30;
                 voiceReplaying = status.voiceReplaying;
                 displayedName = <React.Fragment key={"connected"}>{status.handlerName}</React.Fragment>;
-                icon = <RemoteIconRenderer icon={getIconManager().resolveIcon(status.serverIcon.iconId, status.serverIcon.serverUniqueId, props.handlerId)} />;
+                displayedNameTitle = status.handlerName;
+                icon = <RemoteIconRenderer icon={getIconManager().resolveIcon(status.serverIcon.iconId, status.serverIcon.serverUniqueId, props.handlerId)} className={cssStyle.icon} />;
                 break;
 
             case "connecting":
+                displayedNameTitle = tr("Connecting to server");
                 displayedName = <><Translatable key={"connecting"}>Connecting to server</Translatable> <LoadingDots /></>;
                 break;
 
             case "disconnected":
+                displayedNameTitle = tr("Not connected");
                 displayedName = <Translatable key={"not connected"}>Not connected</Translatable>;
                 break;
         }
@@ -72,10 +75,8 @@ const ConnectionHandler = React.memo((props: { handlerId: string, mode: Connecti
              ref={props.refContainer}
              x-handler-id={props.handlerId}
         >
-            <div className={cssStyle.icon}>
-                {icon}
-            </div>
-            <div className={cssStyle.name} title={displayedName}>{displayedName}</div>
+            {icon}
+            <div className={cssStyle.name} title={displayedNameTitle}>{displayedName}</div>
             <div className={cssStyle.buttonClose} onClick={() => {
                 events.fire("action_destroy_handler", { handlerId: props.handlerId })
             }}>