[K8sBroadcaster] More UI improvements

l7mp · Jan 16, 2025 · 43860de · 43860de
1 parent d81a740
commit 43860de
Showing 1 changed file with 31 additions and 32 deletions.
diff --git a/k8s_broadcaster/lib/k8s_broadcaster_web/controllers/page_html/home.html.heex b/k8s_broadcaster/lib/k8s_broadcaster_web/controllers/page_html/home.html.heex
@@ -73,8 +73,8 @@
           Received stream
         </p>
         <video id="videoplayer" class="w-full bg-black" controls autoplay muted></video>
-        <div class="flex gap-6">
-          <div class="flex flex-col gap-2 border-r pr-4 border-[#050C25]">
+        <div class="flex">
+          <div class="flex flex-col gap-2 border-r border-[#050C25] pr-3">
             <label
               for="stream-source"
               class="font-dmsans text-[16px] font-medium non-italic leading-[140%] text-[#050C25]"
@@ -88,7 +88,7 @@
               WAITING
             </p>
           </div>
-          <div class="flex flex-col gap-2">
+          <div class="flex flex-col gap-2 border-r border-[#050C25] px-3">
             <label
               for="connected-to"
               class="font-dmsans text-[16px] font-medium non-italic leading-[140%] text-[#050C25]"
@@ -102,6 +102,33 @@
               WAITING
             </p>
           </div>
+          <div class="flex flex-col gap-2 border-r border-[#050C25] px-3">
+            <label
+              for="packet-loss-range"
+              class="font-dmsans text-[16px] font-medium non-italic leading-[140%] text-[#050C25]"
+            >
+              RTT (ms)
+            </label>
+            <p id="rtt-short">0</p>
+          </div>
+          <div class="flex flex-col border-r border-[#050C25] px-3">
+            <label
+              for="packet-loss-range"
+              class="font-dmsans text-[16px] font-medium non-italic leading-[140%] text-[#050C25]"
+            >
+              avgJitterBufferDelay (ms)
+            </label>
+            <p id="avg-jitter-buffer-delay-short">0</p>
+          </div>
+          <div class="flex flex-col gap-2 pl-3">
+            <label
+              for="packet-loss-range"
+              class="font-dmsans text-[16px] font-medium non-italic leading-[140%] text-[#050C25]"
+            >
+              freezeDuration (s)
+            </label>
+            <p id="freeze-duration-short">0</p>
+          </div>
         </div>
         <div class="flex flex-row gap-6">
           <div class="flex flex-col gap-2">
@@ -162,35 +189,7 @@
           </div>
         </div>
         <div class="flex flex-col gap-2">
-          <div class="flex flex-row">
-            <div class="flex flex-col gap-2 border-r pr-4 border-[#050C25]">
-              <label
-                for="packet-loss-range"
-                class="font-dmsans text-[16px] font-medium non-italic leading-[140%] text-[#050C25]"
-              >
-                RTT (ms)
-              </label>
-              <p id="rtt-short">0</p>
-            </div>
-            <div class="flex flex-col gap-2 border-r px-4 border-[#050C25]">
-              <label
-                for="packet-loss-range"
-                class="font-dmsans text-[16px] font-medium non-italic leading-[140%] text-[#050C25]"
-              >
-                avgJitterBufferDelay (ms)
-              </label>
-              <p id="avg-jitter-buffer-delay-short">0</p>
-            </div>
-            <div class="flex flex-col gap-2 pl-4">
-              <label
-                for="packet-loss-range"
-                class="font-dmsans text-[16px] font-medium non-italic leading-[140%] text-[#050C25]"
-              >
-                freezeDuration (s)
-              </label>
-              <p id="freeze-duration-short">0</p>
-            </div>
-          </div>
+          <div class="flex flex-row"></div>
         </div>
       </div>
     </div>