From b30768094d3e9b52b982f8cad3d1ab076cb9cc11 Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Fri, 26 Jan 2024 00:22:10 +0800
Subject: [PATCH] New: Global Latency Test

---
 public/index.html        | 33 +++++++++++++++++++--------------
 public/res/css/style.css |  4 ++++
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/public/index.html b/public/index.html
index be7a479e..4baa8fe8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -364,22 +364,27 @@ <h2 id="PingTest" :class="{'mobile-h2' : isMobile }">🌐 {{currentTexts.pingtes
                 <div class="card-body">
                   <!-- Dropdown for IP Selection -->
                   <div class="row m-3 align-items-center justify-content-center">
-                    <div class="col-auto">
+                    <div class="col-12 col-md-auto">
                       <label for="pingIP" class="col-form-label">{{currentTexts.pingtest.Note2}}</label>
                     </div>
-                    <div class="col-auto">
-                      <select id="pingIP" class="form-select" v-model="selectedIP"
-                        :class="{'bg-dark text-light': isDarkMode}">
-                        <option v-for="ip in allIPs" :key="ip" :value="ip">{{ ip }}</option>
-                      </select>
-                    </div>
-                    <div class="col-auto">
-                      <button class="btn btn-primary" @click="startPingCheck"
-                        :disabled="pingCheckStatus === 'running' || selectedIP === allIPs[0]">
-                        <span v-if="pingCheckStatus === 'idle' || pingCheckStatus === 'finished' ">{{currentTexts.pingtest.Run}}</span>
-                        <span v-if="pingCheckStatus === 'running'" class="spinner-grow spinner-grow-sm"
-                          aria-hidden="true"></span>
-                      </button>
+                    <div class="col-12 col-md-auto mt-2 mt-md-0">
+                      <div class="row justify-content-between">
+                        <div class="col-auto">
+                          <select id="pingIP" class="form-select jn-ping-form-select" v-model="selectedIP"
+                            :class="{'bg-dark text-light': isDarkMode}">
+                            <option v-for="ip in allIPs" :key="ip" :value="ip">{{ ip }}</option>
+                          </select>
+                        </div>
+                        <div class="col-auto">
+                          <button class="btn btn-primary" @click="startPingCheck"
+                            :disabled="pingCheckStatus === 'running' || selectedIP === allIPs[0]">
+                            <span
+                              v-if="pingCheckStatus === 'idle' || pingCheckStatus === 'finished' ">{{currentTexts.pingtest.Run}}</span>
+                            <span v-if="pingCheckStatus === 'running'" class="spinner-grow spinner-grow-sm"
+                              aria-hidden="true"></span>
+                          </button>
+                        </div>
+                      </div>
                     </div>
                   </div>
 
diff --git a/public/res/css/style.css b/public/res/css/style.css
index 439945be..dd0ae2b2 100644
--- a/public/res/css/style.css
+++ b/public/res/css/style.css
@@ -258,4 +258,8 @@ footer {
 
 .speedtest-p {
     margin-top:10pt;
+}
+
+.jn-ping-form-select {
+    min-width: 140pt;
 }
\ No newline at end of file