From 73718a5dc55595b34094239b4d5728df66417e76 Mon Sep 17 00:00:00 2001
From: Tara Rostami <132676256+TaraRostami@users.noreply.github.com>
Date: Sat, 17 Feb 2024 19:52:23 +0330
Subject: UI improvements (#1813)

---
 web/html/login.html                           |  21 ++--
 web/html/xui/common_sider.html                |  10 +-
 web/html/xui/component/persianDatepicker.html |   4 +-
 web/html/xui/form/inbound.html                |   4 +-
 web/html/xui/form/stream/external_proxy.html  |   2 +-
 web/html/xui/form/stream/stream_tcp.html      |   4 +-
 web/html/xui/form/stream/stream_ws.html       |   2 +-
 web/html/xui/index.html                       | 144 ++++++++++++++------------
 web/html/xui/settings.html                    |   8 +-
 9 files changed, 109 insertions(+), 90 deletions(-)

(limited to 'web/html')

diff --git a/web/html/login.html b/web/html/login.html
index 34eff41c..b622a080 100644
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -31,7 +31,7 @@
   }
   .title {
     font-size: 32px;
-    font-weight: bold;
+    font-weight: 600;
   }
   #app {
     overflow: hidden;
@@ -204,7 +204,7 @@
     position: relative;
     width: 100%;
     height: 15vh;
-    margin-bottom: -5px; /*Fix for safari gap*/
+    margin-bottom: -8px; /*Fix for safari gap*/
     min-height: 100px;
     max-height: 150px;
   }
@@ -212,23 +212,27 @@
     animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
   }
   .dark .parallax > use {
-    fill: rgb(10 117 87 / 20%);
+    fill: #0f2d32;
   }
   .parallax > use:nth-child(1) {
     animation-delay: -2s;
-    animation-duration: 7s;
+    animation-duration: 4s;
     opacity: 0.2;
   }
   .parallax > use:nth-child(2) {
     animation-delay: -3s;
-    animation-duration: 10s;
+    animation-duration: 7s;
     opacity: 0.4;
   }
   .parallax > use:nth-child(3) {
     animation-delay: -4s;
-    animation-duration: 13s;
+    animation-duration: 10s;
     opacity: 0.6;
   }
+  .parallax > use:nth-child(4) {
+  animation-delay: -5s;
+  animation-duration: 13s;
+  }
   @keyframes move-forever {
     0% {
       transform: translate3d(-90px, 0, 0);
@@ -255,9 +259,10 @@
                         <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
                     </defs>
                     <g class="parallax">
+                        <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" />
                         <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
                         <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
-                        <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(0, 135, 113, 0.08)" />
+                        <use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" />
                     </g>
                 </svg>
             </div>
@@ -290,7 +295,7 @@
                         </a-form-item>
                         <a-form-item>
                             <a-row justify="center" class="centered">
-                                <div class="wave-btn-bg wave-btn-bg-cl" :style="loading ? { width: '54px' } : { display: 'inline-block' }">
+                                <div class="wave-btn-bg wave-btn-bg-cl" :style="loading ? { width: '52px' } : { display: 'inline-block' }">
                                     <a-button class="ant-btn-primary-login" type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined">
                                         [[ loading ? '' : '{{ i18n "login" }}' ]]
                                     </a-button>
diff --git a/web/html/xui/common_sider.html b/web/html/xui/common_sider.html
index f91b9fbb..13d5bd49 100644
--- a/web/html/xui/common_sider.html
+++ b/web/html/xui/common_sider.html
@@ -1,19 +1,19 @@
 {{define "menuItems"}}
 <a-menu-item key="{{ .base_path }}panel/">
     <a-icon type="dashboard"></a-icon>
-    <span>{{ i18n "menu.dashboard"}}</span>
+    <span><b>{{ i18n "menu.dashboard"}}</b></span>
 </a-menu-item>
 <a-menu-item key="{{ .base_path }}panel/inbounds">
     <a-icon type="user"></a-icon>
-    <span>{{ i18n "menu.inbounds"}}</span>
+    <span><b>{{ i18n "menu.inbounds"}}</b></span>
 </a-menu-item>
 <a-menu-item key="{{ .base_path }}panel/settings">
     <a-icon type="setting"></a-icon>
-    <span>{{ i18n "menu.settings"}}</span>
+    <span><b>{{ i18n "menu.settings"}}</b></span>
 </a-menu-item>
 <a-menu-item key="{{ .base_path }}panel/xray">
     <a-icon type="tool"></a-icon>
-    <span>{{ i18n "menu.xray"}}</span>
+    <span><b>{{ i18n "menu.xray"}}</b></span>
 </a-menu-item>
 <!--<a-menu-item key="{{ .base_path }}panel/clients">-->
 <!--    <a-icon type="laptop"></a-icon>-->
@@ -21,7 +21,7 @@
 <!--</a-menu-item>-->
 <a-menu-item key="{{ .base_path }}logout">
     <a-icon type="logout"></a-icon>
-    <span>{{ i18n "menu.logout"}}</span>
+    <span><b>{{ i18n "menu.logout"}}</b></span>
 </a-menu-item>
 {{end}}
 
diff --git a/web/html/xui/component/persianDatepicker.html b/web/html/xui/component/persianDatepicker.html
index 10ef8472..456d5ec6 100644
--- a/web/html/xui/component/persianDatepicker.html
+++ b/web/html/xui/component/persianDatepicker.html
@@ -5,7 +5,7 @@
                  @input="$emit('input', convertToGregorian($event.target.value)); jalaliDatepicker.hide();"
                  :placeholder="placeholder">
             <template #addonAfter>
-                <a-icon type="calendar" style="font-size: 16px;"/>
+                <a-icon type="calendar" style="font-size: 14px; opacity: 0.5;"/>
             </template>
         </a-input>
     </div>
@@ -57,4 +57,4 @@
         }
     });
 </script>
-{{end}}
\ No newline at end of file
+{{end}}
diff --git a/web/html/xui/form/inbound.html b/web/html/xui/form/inbound.html
index 048fc818..6f3705ff 100644
--- a/web/html/xui/form/inbound.html
+++ b/web/html/xui/form/inbound.html
@@ -54,7 +54,7 @@
                 <a-icon type="question-circle"></a-icon>
             </a-tooltip>
         </template>
-            <a-date-picker v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+            <a-date-picker style="width: 100%;" v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
                 :dropdown-class-name="themeSwitcher.currentTheme"
                 v-model="dbInbound._expiryTime"></a-date-picker>
             <persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
@@ -117,4 +117,4 @@
 <template v-if="inbound.canSniffing()">
     {{template "form/sniffing"}}
 </template>
-{{end}}
\ No newline at end of file
+{{end}}
diff --git a/web/html/xui/form/stream/external_proxy.html b/web/html/xui/form/stream/external_proxy.html
index 2a072df9..9c3ed2e0 100644
--- a/web/html/xui/form/stream/external_proxy.html
+++ b/web/html/xui/form/stream/external_proxy.html
@@ -20,7 +20,7 @@
             <a-input-number style="width: 15%;" v-model.number="row.port" min="1" max="65531"></a-input-number>
         </a-tooltip>
         <a-input style="width: 20%" v-model.trim="row.remark" placeholder='{{ i18n "remark" }}'></a-input>
-        <a-button style="width: 10%; margin: 0px" @click="inbound.stream.externalProxy.splice(index, 1)">-</a-button>
+        <a-button style="width: 10%; margin: 0px; border-radius: 0 1rem 1rem 0;" @click="inbound.stream.externalProxy.splice(index, 1)">-</a-button>
     </a-input-group>
 </a-form>
 {{end}}
diff --git a/web/html/xui/form/stream/stream_tcp.html b/web/html/xui/form/stream/stream_tcp.html
index 19a09ac3..8576df8c 100644
--- a/web/html/xui/form/stream/stream_tcp.html
+++ b/web/html/xui/form/stream/stream_tcp.html
@@ -33,7 +33,7 @@
         </template>
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
-        <a-button size="small" @click="inbound.stream.tcp.request.addHeader('host', '')">+</a-button>
+        <a-button size="small" @click="inbound.stream.tcp.request.addHeader('Host', '')">+</a-button>
     </a-form-item>
     <a-form-item :wrapper-col="{span:24}">
         <a-input-group compact v-for="(header, index) in inbound.stream.tcp.request.headers">
@@ -79,4 +79,4 @@
         </a-input-group>
     </a-form-item>
 </a-form>
-{{end}}
\ No newline at end of file
+{{end}}
diff --git a/web/html/xui/form/stream/stream_ws.html b/web/html/xui/form/stream/stream_ws.html
index 00b64167..62380e94 100644
--- a/web/html/xui/form/stream/stream_ws.html
+++ b/web/html/xui/form/stream/stream_ws.html
@@ -7,7 +7,7 @@
         <a-input v-model.trim="inbound.stream.ws.path"></a-input>
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
-        <a-button size="small" @click="inbound.stream.ws.addHeader('host', '')">+</a-button>
+        <a-button size="small" @click="inbound.stream.ws.addHeader('Host', '')">+</a-button>
     </a-form-item>
     <a-form-item :wrapper-col="{span:24}">
         <a-input-group compact v-for="(header, index) in inbound.stream.ws.headers">
diff --git a/web/html/xui/index.html b/web/html/xui/index.html
index a9391952..abd3b8d0 100644
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -18,6 +18,14 @@
     .ant-card-dark h2 {
         color: hsla(0, 0%, 100%, .65);
     }
+
+    .ant-tag-df {
+        color: rgb(0 0 0 / 80%);
+    }
+
+    .dark .ant-tag-df {
+        color: rgb(255 255 255 / 80%);
+    }
 </style>
 
 <body>
@@ -36,15 +44,15 @@
                                         <a-progress type="dashboard" status="normal"
                                                     :stroke-color="status.cpu.color"
                                                     :percent="status.cpu.percent"></a-progress>
-                                        <div>CPU:  [[ cpuCoreFormat(status.cpuCores) ]]</div>
-                                        <div>Speed:  [[ cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
+                                        <div><b>CPU:</b> [[ cpuCoreFormat(status.cpuCores) ]]</div>
+                                        <div><b>Speed:</b> [[ cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
                                     </a-col>
                                     <a-col :span="12" style="text-align: center">
                                         <a-progress type="dashboard" status="normal"
                                                     :stroke-color="status.mem.color"
                                                     :percent="status.mem.percent"></a-progress>
                                         <div>
-                                            {{ i18n "pages.index.memory"}}: [[ sizeFormat(status.mem.current) ]] / [[ sizeFormat(status.mem.total) ]]
+                                            <b>{{ i18n "pages.index.memory"}}:</b> [[ sizeFormat(status.mem.current) ]] / [[ sizeFormat(status.mem.total) ]]
                                         </div>
                                     </a-col>
                                 </a-row>
@@ -56,7 +64,7 @@
                                                     :stroke-color="status.swap.color"
                                                     :percent="status.swap.percent"></a-progress>
                                         <div>
-                                            Swap: [[ sizeFormat(status.swap.current) ]] / [[ sizeFormat(status.swap.total) ]]
+                                            <b>Swap:</b> [[ sizeFormat(status.swap.current) ]] / [[ sizeFormat(status.swap.total) ]]
                                         </div>
                                     </a-col>
                                     <a-col :span="12" style="text-align: center">
@@ -64,7 +72,7 @@
                                                     :stroke-color="status.disk.color"
                                                     :percent="status.disk.percent"></a-progress>
                                         <div>
-                                            {{ i18n "pages.index.hard"}}: [[ sizeFormat(status.disk.current) ]] / [[ sizeFormat(status.disk.total) ]]
+                                            <b>{{ i18n "pages.index.hard"}}:</b> [[ sizeFormat(status.disk.current) ]] / [[ sizeFormat(status.disk.total) ]]
                                         </div>
                                     </a-col>
                                 </a-row>
@@ -75,25 +83,25 @@
             </transition>
             <transition name="list" appear>
                 <a-row>
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                         <a-card hoverable>
-                            3X-UI <a href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="green">v{{ .cur_ver }}</a-tag></a>
-                            Xray <a-tag color="green" style="cursor: pointer;" @click="openSelectV2rayVersion">v[[ status.xray.version ]]</a-tag>
-                            <a href="https://t.me/panel3xui" target="_blank"><a-tag color="green">@panel3xui</a-tag></a>
+                            <b>3X-UI:</b>
+                            <a rel="noopener" href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="green">v{{ .cur_ver }}</a-tag></a>
+                            <a rel="noopener" href="https://t.me/panel3xui" target="_blank"><a-tag color="green">@Panel3xui</a-tag></a>
                         </a-card>
                     </a-col>
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                         <a-card hoverable>
-                            {{ i18n "menu.link" }}:
-                            <a-tag color="purple" style="cursor: pointer;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
-                            <a-tag color="purple" style="cursor: pointer;" @click="openConfig">{{ i18n "pages.index.config" }}</a-tag>
-                            <a-tag color="purple" style="cursor: pointer;" @click="openBackup">{{ i18n "pages.index.backup" }}</a-tag>
+                            <b>{{ i18n "pages.index.operationHours" }}:</b>
+                            <a-tag class="ant-tag-df">Xray [[ formatSecond(status.appStats.uptime) ]]</a-tag>
+                            <a-tag class="ant-tag-df">OS [[ formatSecond(status.uptime) ]]</a-tag>
                         </a-card>
                     </a-col>
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                         <a-card hoverable>
-                            {{ i18n "pages.index.xrayStatus" }}:
-                            <a-tag :color="status.xray.color">[[ status.xray.state ]]</a-tag>
+                            <b>{{ i18n "pages.index.xrayStatus" }}:</b>
+                            <a-tag style="text-transform: capitalize;" :color="status.xray.color">[[ status.xray.state ]]
+                            </a-tag>
                             <a-popover v-if="status.xray.state === State.Error"
                                 :overlay-class-name="themeSwitcher.currentTheme">
                                 <span slot="title" style="font-size: 12pt">An error occurred while running Xray
@@ -106,137 +114,143 @@
                             </a-popover>
                             <a-tag color="purple" style="cursor: pointer;" @click="stopXrayService">{{ i18n "pages.index.stopXray" }}</a-tag>
                             <a-tag color="purple" style="cursor: pointer;" @click="restartXrayService">{{ i18n "pages.index.restartXray" }}</a-tag>                    
-                            <a-tag color="purple" style="cursor: pointer;" @click="openSelectV2rayVersion">{{ i18n "pages.index.xraySwitch" }}</a-tag>
+                            <a-tag color="purple" style="cursor: pointer;" @click="openSelectV2rayVersion">v[[ status.xray.version ]]</a-tag>
                         </a-card>
                     </a-col>
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                         <a-card hoverable>
-                            {{ i18n "pages.index.operationHours" }}:
-                            Xray
-                            <a-tag color="green">[[ formatSecond(status.appStats.uptime) ]]</a-tag>
-                            OS
-                            <a-tag color="green">[[ formatSecond(status.uptime) ]]</a-tag>
+                            <b>{{ i18n "menu.link" }}:</b>
+                            <a-tag color="purple" style="cursor: pointer;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
+                            <a-tag color="purple" style="cursor: pointer;" @click="openConfig">{{ i18n "pages.index.config" }}</a-tag>
+                            <a-tag color="purple" style="cursor: pointer;" @click="openBackup">{{ i18n "pages.index.backup" }}</a-tag>
                         </a-card>
                     </a-col>
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                         <a-card hoverable>
-                            {{ i18n "pages.index.systemLoad" }}: [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
+                            <b>{{ i18n "pages.index.systemLoad" }}:</b>
+                            <a-tag class="ant-tag-df">
                             <a-tooltip>
+                                [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
                                 <template slot="title">
                                     {{ i18n "pages.index.systemLoadDesc" }}
                                 </template>
-                                <a-icon type="question-circle"></a-icon>
                             </a-tooltip>
+                            </a-tag>
                         </a-card>
                     </a-col>
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                         <a-card hoverable>
-                            {{ i18n "usage"}}:
-                            RAM [[ sizeFormat(status.appStats.mem) ]] -
-                            Threads [[ status.appStats.threads ]]
-                            </a-tooltip>
+                            <b>{{ i18n "usage"}}:</b>
+                            <a-tag class="ant-tag-df">
+                            RAM [[ sizeFormat(status.appStats.mem) ]]
+                            </a-tag>
+                            <a-tag class="ant-tag-df">
+                                Threads [[ status.appStats.threads ]]
+                            </a-tag>
                         </a-card>
                     </a-col>
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                         <a-card hoverable>
                             <a-row>
                                 <a-col :span="12">
-                                    <a-icon type="global"></a-icon>
-                                    IPv4:
+                                    <a-tag class="ant-tag-df">
                                     <a-tooltip>
+                                    <a-icon type="global"></a-icon> IPv4
                                         <template slot="title">
                                             [[ status.publicIP.ipv4 ]]
                                         </template>
-                                        <a-icon type="question-circle"></a-icon>
                                     </a-tooltip>
-                                </a-col>
-                                <a-col :span="12">
-                                    <a-icon type="global"></a-icon>
-                                    IPv6:
+                                </a-tag>
+                            </a-col>
+                            <a-col :span="12">
+                                <a-tag class="ant-tag-df">
                                     <a-tooltip>
+                                    <a-icon type="global"></a-icon> IPv6
                                         <template slot="title">
                                             [[ status.publicIP.ipv6 ]]
                                         </template>
-                                        <a-icon type="question-circle"></a-icon>
                                     </a-tooltip>
+                                    </a-tag>
                                 </a-col>
                             </a-row>
                         </a-card>
                     </a-col>                    
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                         <a-card hoverable>
                             <a-row>
                                 <a-col :span="12">
-                                    <a-icon type="swap"></a-icon>
-                                    TCP:  [[ status.tcpCount ]]
+                                    <a-tag class="ant-tag-df">
                                     <a-tooltip>
+                                    <a-icon type="swap"></a-icon> TCP:  [[ status.tcpCount ]]
                                         <template slot="title">
                                             {{ i18n "pages.index.connectionTcpCountDesc" }}
                                         </template>
-                                        <a-icon type="question-circle"></a-icon>
                                     </a-tooltip>
+                                    </a-tag>
                                 </a-col>
                                 <a-col :span="12">
-                                    <a-icon type="swap"></a-icon>
-                                    UDP:  [[ status.udpCount ]]
+                                    <a-tag class="ant-tag-df">
                                     <a-tooltip>
+                                    <a-icon type="swap"></a-icon> UDP:  [[ status.udpCount ]]
                                         <template slot="title">
                                             {{ i18n "pages.index.connectionUdpCountDesc" }}
                                         </template>
-                                        <a-icon type="question-circle"></a-icon>
                                     </a-tooltip>
+                                    </a-tag>
                                 </a-col>
                             </a-row>
                         </a-card>
                     </a-col>
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                         <a-card hoverable>
                             <a-row>
                                 <a-col :span="12">
-                                    <a-icon type="arrow-up"></a-icon>
-                                    [[ sizeFormat(status.netIO.up) ]]/s
+                                    <a-tag class="ant-tag-df">
                                     <a-tooltip>
+                                    <a-icon type="arrow-up"></a-icon>
+                                    Up: [[ sizeFormat(status.netIO.up) ]]/s
                                         <template slot="title">
                                             {{ i18n "pages.index.upSpeed" }}
                                         </template>
-                                        <a-icon type="question-circle"></a-icon>
                                     </a-tooltip>
+                                    </a-tag>
                                 </a-col>
                                 <a-col :span="12">
-                                    <a-icon type="arrow-down"></a-icon>
-                                    [[ sizeFormat(status.netIO.down) ]]/s
+                                    <a-tag class="ant-tag-df">
                                     <a-tooltip>
+                                    <a-icon type="arrow-down"></a-icon>
+                                    Down: [[ sizeFormat(status.netIO.down) ]]/s
                                         <template slot="title">
                                             {{ i18n "pages.index.downSpeed" }}
                                         </template>
-                                        <a-icon type="question-circle"></a-icon>
                                     </a-tooltip>
+                                    </a-tag>
                                 </a-col>
                             </a-row>
                         </a-card>
                     </a-col>
-                    <a-col :sm="24" :md="12">
+                    <a-col :sm="24" :lg="12">
                         <a-card hoverable>
                             <a-row>
                                 <a-col :span="12">
-                                    <a-icon type="cloud-upload"></a-icon>
-                                    [[ sizeFormat(status.netTraffic.sent) ]]
+                                    <a-tag class="ant-tag-df">
                                     <a-tooltip>
+                                        <a-icon type="cloud-upload"></a-icon>
                                         <template slot="title">
                                             {{ i18n "pages.index.totalSent" }}
-                                        </template>
-                                        <a-icon type="question-circle"></a-icon>
+                                        </template> Out: [[ sizeFormat(status.netTraffic.sent) ]]
                                     </a-tooltip>
+                                    </a-tag>
                                 </a-col>
                                 <a-col :span="12">
-                                    <a-icon type="cloud-download"></a-icon>
-                                    [[ sizeFormat(status.netTraffic.recv) ]]
+                                    <a-tag class="ant-tag-df">
                                     <a-tooltip>
+                                        <a-icon type="cloud-download"></a-icon>
                                         <template slot="title">
                                             {{ i18n "pages.index.totalReceive" }}
-                                        </template>
-                                        <a-icon type="question-circle"></a-icon>
+                                        </template> In: [[ sizeFormat(status.netTraffic.recv) ]]
                                     </a-tooltip>
+                                    </a-tag>
                                 </a-col>
                             </a-row>
                         </a-card>
@@ -256,7 +270,7 @@
         ></a-alert>
         <template v-for="version, index in versionModal.versions">
             <a-tag :color="index % 2 == 0 ? 'purple' : 'green'"
-                   style="margin: 10px" @click="switchV2rayVersion(version)">
+                   style="margin-right: 10px" @click="switchV2rayVersion(version)">
                 [[ version ]]
             </a-tag>
         </template>
diff --git a/web/html/xui/settings.html b/web/html/xui/settings.html
index 0acbbfec..533553c5 100644
--- a/web/html/xui/settings.html
+++ b/web/html/xui/settings.html
@@ -76,15 +76,15 @@
         <a-layout-content>
             <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
                 <a-space direction="vertical">
-                    <a-card hoverable style="margin-bottom: .5rem;">
-                        <a-row>
-                            <a-col :xs="24" :sm="8" style="padding: 4px;">
+                    <a-card hoverable style="margin-bottom: .5rem; overflow-x: hidden;">
+                        <a-row style="display: flex; flex-wrap: wrap; align-items: center;">
+                            <a-col :xs="24" :sm="10" style="padding: 4px;">
                                 <a-space direction="horizontal">
                                     <a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.settings.save" }}</a-button>
                                     <a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.settings.restartPanel" }}</a-button>
                                 </a-space>
                             </a-col>
-                            <a-col :xs="24" :sm="16">
+                            <a-col :xs="24" :sm="14">
                                 <template>
                                     <div>
                                         <template>
-- 
cgit v1.2.3