From 381c17e0bbdfb5793269a94cbe4060a58ebd14f0 Mon Sep 17 00:00:00 2001
From: Yat Ho <lagoho7@gmail.com>
Date: Sun, 26 May 2024 02:32:01 +0800
Subject: [PATCH] webui: fixed width for speed info (#6739)

* webui: fixed width for speed info

* fix: match download icon-text gap with upload

* webui: move speed arrow to the right of the text
---
 web/assets/css/transmission-app.scss | 30 ++++++++----
 web/public_html/index.html           | 69 +++++++++++++++-------------
 2 files changed, 57 insertions(+), 42 deletions(-)

diff --git a/web/assets/css/transmission-app.scss b/web/assets/css/transmission-app.scss
index bf769a09c..441212100 100644
--- a/web/assets/css/transmission-app.scss
+++ b/web/assets/css/transmission-app.scss
@@ -383,20 +383,30 @@ a {
   > * {
     margin-right: 5px;
   }
-}
 
-#speed-up-icon,
-#speed-dn-icon {
-  fill: var(--color-fg-primary);
+  .speed-container {
+    display: inherit;
+    align-items: inherit;
+    flex-direction: inherit;
 
-  svg {
-    width: 20px;
+    &:not(:nth-child(1 of #mainwin-statusbar .speed-container)) {
+      width: 100px;
+    }
   }
-}
 
-#speed-dn-label,
-#speed-up-label {
-  text-align: right;
+  #speed-up-icon,
+  #speed-dn-icon {
+    fill: var(--color-fg-primary);
+
+    svg {
+      width: 20px;
+    }
+  }
+
+  #speed-dn-label,
+  #speed-up-label {
+    text-align: right;
+  }
 }
 
 /// TORRENT CONTAINER
diff --git a/web/public_html/index.html b/web/public_html/index.html
index 54d767f2e..799faa29e 100755
--- a/web/public_html/index.html
+++ b/web/public_html/index.html
@@ -203,40 +203,45 @@
         <input type="search" id="torrent-search" placeholder="Filter" />
         <span id="filter-count">&nbsp;</span>
         <span class="flexible-space"></span>
-        <div id="speed-dn-icon">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="32"
-            height="32"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="feather feather-chevron-down"
-          >
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
+        <div class="speed-container">
+          <div id="speed-dn-label"></div>
+          <div id="speed-dn-icon">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="32"
+              height="32"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="feather feather-chevron-down"
+            >
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </div>
         </div>
-        <div id="speed-dn-label"></div>
-        <div id="speed-up-icon">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="32"
-            height="32"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="feather feather-chevron-up"
-          >
-            <polyline points="18 15 12 9 6 15"></polyline>
-          </svg>
+        <div class="speed-container">
+          <span class="flexible-space"></span>
+          <div id="speed-up-label"></div>
+          <div id="speed-up-icon">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="32"
+              height="32"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="feather feather-chevron-up"
+            >
+              <polyline points="18 15 12 9 6 15"></polyline>
+            </svg>
+          </div>
         </div>
-        <div id="speed-up-label"></div>
       </header>
 
       <main id="mainwin-workarea">