From 0d830678f31d50e2ccc80a79e3d6fb56ea5b1af8 Mon Sep 17 00:00:00 2001
From: ckt1031 <65409152+ckt1031@users.noreply.github.com>
Date: Sun, 30 Jul 2023 12:07:43 +0800
Subject: [PATCH] feat: add settings tab overflow-y

---
 web/src/index.css              | 49 +++++++++++++++++++++++-----------
 web/src/pages/Setting/index.js |  2 +-
 2 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/web/src/index.css b/web/src/index.css
index 5d60e377..b07fbaf1 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,35 +1,54 @@
 body {
-    margin: 0;
-    padding-top: 55px;
-    overflow-y: scroll;
-    font-family: Lato, 'Helvetica Neue', Arial, Helvetica, "Microsoft YaHei", sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    scrollbar-width: none;
+  margin: 0;
+  padding-top: 55px;
+  overflow-y: scroll;
+  font-family: Lato, 'Helvetica Neue', Arial, Helvetica, 'Microsoft YaHei',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  scrollbar-width: none;
 }
 
 body::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
 
 .main-content {
-    padding: 4px;
+  padding: 4px;
 }
 
 .small-icon .icon {
-    font-size: 1em !important;
+  font-size: 1em !important;
 }
 
 .custom-footer {
-    font-size: 1.1em;
+  font-size: 1.1em;
 }
 
 @media only screen and (max-width: 600px) {
-    .hide-on-mobile {
-        display: none !important;
-    }
+  .hide-on-mobile {
+    display: none !important;
+  }
+}
+
+.scrollable-tabs .menu {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+.scrollable-tabs .menu .item {
+  white-space: nowrap;
+  flex: 0 0 auto;
+}
+
+.scrollable-tabs .menu .item.active {
+  border-bottom: none;
 }
diff --git a/web/src/pages/Setting/index.js b/web/src/pages/Setting/index.js
index 30d0ef28..6b4ad390 100644
--- a/web/src/pages/Setting/index.js
+++ b/web/src/pages/Setting/index.js
@@ -47,7 +47,7 @@ const Setting = () => {
 
   return (
     <Segment>
-      <Tab menu={{ secondary: true, pointing: true }} panes={panes} />
+      <Tab menu={{ secondary: true, pointing: true }} panes={panes} className="scrollable-tabs" />
     </Segment>
   );
 };