Merge branch 'web-ui-improvement' into refactor-main

web/src/index.css

@@ -2,7 +2,8 @@ body {
   margin: 0;
   padding-top: 55px;
   overflow-y: scroll;
-    font-family: Lato, 'Helvetica Neue', Arial, Helvetica, "Microsoft YaHei", sans-serif;
+  font-family: Lato, 'Helvetica Neue', Arial, Helvetica, 'Microsoft YaHei',
+    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scrollbar-width: none;
@@ -13,7 +14,8 @@ body::-webkit-scrollbar {
 }
 
 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 {
@@ -33,3 +35,20 @@ code {
     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;
+}

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>
   );
 };