Update.

Author: xOS

resource/static/main.css

@@ -22,13 +22,13 @@
 
 .custom-tabs-container {
     overflow-x: auto;
-    width: 100%;
+    width: fit-content;
+    max-width: 100%;
     white-space: nowrap;
     position: relative;
     background-color: #fbfbfb26;
     border-radius: 50px;
     padding: 5px;
-    display: inline-flex;
     margin-bottom: 20px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.10);
     -webkit-overflow-scrolling: touch;
@@ -39,8 +39,19 @@
     display: none;
 }
 
+.tabs-wrapper {
+    display: flex;
+    justify-content: center;
+}
+
+.tabs-content-area {
+    display: inline-flex;
+    /*gap: 0.5em;*/
+    /*padding: 0.2em 0;*/
+}
+
 .custom-tab {
-    padding: 8px 20px;
+    padding: 8px 15px;
     margin: 0 3px;
     cursor: pointer;
     color: #777;
@@ -791,7 +802,7 @@ i.note.icon {
 }
 
 #app .ui.fluid.accordion {
-    border-radius: 10px;
+    border-radius: 20px;
     margin-bottom: 1rem;
     background-color: #fbfbfb26;
     -webkit-transition: all .3s ease;

resource/template/common/header.html

@@ -20,7 +20,7 @@
     <link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css?v20220423">
     <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-logos/0.17/font-logos.min.css" rel="stylesheet">
     <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/flag-icon-css/4.1.5/css/flag-icons.min.css" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" href="/static/main.css?v20250512">
+    <link rel="stylesheet" type="text/css" href="/static/main.css?v202505121">
     <link rel="shortcut icon" type="image/png" href="/static/logo.svg?v20220602"/>
 </head>
 {{if ts .CustomCodeDashboard}} {{.CustomCodeDashboard|safe}} {{end}}

resource/template/theme-default/header.html

@@ -21,7 +21,7 @@
     <link rel="stylesheet" type="text/css" href="/static/fontawesome.min.css?v2025032723">
     <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-logos/0.17/font-logos.min.css" rel="stylesheet">
     <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/flag-icon-css/4.1.5/css/flag-icons.min.css" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" href="/static/main.css?v20250512">
+    <link rel="stylesheet" type="text/css" href="/static/main.css?v202505121">
     <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/semantic-ui/2.4.1/semantic.min.js"></script>
     <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>

resource/template/theme-default/home.html

@@ -5,21 +5,36 @@
 
 <div class="nb-container">
     <div class="ui container">
-        <div v-if="servers && servers.length > 0" class="custom-tabs-container" ref="tabsContainer">
-    <div class="custom-tab"
-         :class="{ active: activeTag === '' }"
-         @click="handleTabClick('', $event)"
-         ref="allTab"> {{tr "All"}}
-    </div>
-    <div v-for="(tag, index) in uniqueTags.slice().reverse()"
-         :key="tag"
-         class="custom-tab"
-         :class="{ active: activeTag === tag }"
-         @click="handleTabClick(tag, $event)"
-         :ref="'tagTab' + index"> @#tag#@ <!-- index here is from the reversed array -->
-    </div>
-    <div class="tab-slider" ref="tabSlider"></div>
-</div>
+        <div style="display: flex; justify-content: center;">
+            <div v-if="servers && servers.length > 0" 
+                 class="custom-tabs-container" 
+                 ref="tabsContainer" 
+                 style="width: fit-content;
+                        max-width: 100%;
+                        overflow-x: auto;
+                        position: relative;
+                        white-space: nowrap;
+                        ">
+                <div style="display: inline-flex;
+                            gap: 0.5em;
+                            padding: 0.2em 0;
+                            ">
+                    <div class="custom-tab"
+                        :class="{ active: activeTag === '' }"
+                        @click="handleTabClick('', $event)"
+                        ref="allTab"> {{tr "All"}}
+                    </div>
+                    <div v-for="(tag, index) in uniqueTags.slice().reverse()"
+                        :key="tag"
+                        class="custom-tab"
+                        :class="{ active: activeTag === tag }"
+                        @click="handleTabClick(tag, $event)"
+                        :ref="'tagTab' + index"> @#tag#@
+                    </div>
+                </div>
+                <div class="tab-slider" ref="tabSlider"></div>
+            </div>
+        </div>
 
         <template v-if="filteredServers && filteredServers.length > 0">
             <div class="ui four stackable status cards">
@@ -532,7 +547,7 @@
                     return '0B'
                 }
                 const i = Math.floor(Math.log(bytes) / Math.log(1024));
-                const sizes = ["B", "K", "M", "G", "T", "P", "E", "Z", "Y"];
+                const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
                 return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i];
             },
             getCoreAndGHz(arr) {
@@ -559,7 +574,7 @@
                     return Math.ceil(bs.toFixed(2)) + 'G';
                 } else {
                     bs = bs * 1024;
-                    return Math.ceil(bs.toFixed(2)) + 'M';
+                    return Math.ceil(bs.toFixed(2)) + 'MB';
                 }
             },
             listTipsMouseenter(obj, strs, tipsNum = 1){