add scrollbar style, Optimize mobile phone layout (#3)

* add scrollbar style, Optimize mobile phone layout

* sync

islands/Container.tsx

@@ -40,6 +40,7 @@ export default class Container extends Component<ContainerProps> {
         const [display, set_display] = useState(false);
         const [state, set_state1] = useState("#/");
         const [darkmode, set_darkmode1] = useState(DarkMode.Auto);
+        const [scrollHide, set_ScrollHide] = useState(false);
         const set_darkmode: StateUpdater<DarkMode> = (u) => {
             const v = typeof u === "function" ? u(darkmode) : u;
             set_darkmode1(v);

static/common.css

@@ -1,3 +1,19 @@
+::-webkit-scrollbar{ 
+    width: 6px; 
+    height: 1px; 
+  } 
+  ::-webkit-scrollbar-thumb{ 
+    border-radius: 100%; 
+  } 
+  ::-webkit-scrollbar-track{ 
+    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); 
+    border-radius: 10px; 
+    background: #EDEDED; 
+  } 
+  ::-webkit-scrollbar-thumb{ 
+    background: rgba(0, 0, 0, 0.45); 
+    border-radius: 6px; 
+  }
 body {
     min-width: 100vw;
     min-height: 100vh;
@@ -115,14 +131,6 @@ body {
     left: -10px;
 }
 
-@media (max-width:767px) {}
-
-@media (max-width:1280px) {
-    .settings {
-        margin: 0;
-    }
-}
-
 .task_manager {
     padding: 16px;
     display: flex;
@@ -266,3 +274,22 @@ div.new_task>div.container>div.bottom {
     line-height: 40px;
     min-height: 40px;
 }
+
+
+@media (max-width:767px) {
+    .settings .text-box .text{
+        flex-direction: column;
+        align-items: start;
+    }
+
+    .settings .text-box .mdc-text-field{
+        margin: 10px 0;
+        width: 100%;
+    }
+}
+
+@media (max-width:1280px) {
+    .settings {
+        margin: 0;
+    }
+}

static/hide-scrollbar.css

@@ -1,3 +0,0 @@
-::-webkit-scrollbar {
-    display: none;
-}

static/scrollBar.css

@@ -0,0 +1,16 @@
+::-webkit-scrollbar{ 
+  width: 6px; 
+  height: 1px; 
+} 
+::-webkit-scrollbar-thumb{ 
+  border-radius: 100%; 
+} 
+::-webkit-scrollbar-track{ 
+  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); 
+  border-radius: 10px; 
+  background: #EDEDED; 
+} 
+::-webkit-scrollbar-thumb{ 
+  background: rgba(0, 0, 0, 0.45); 
+  border-radius: 6px; 
+}