style: a bite of responsive yo

4 files changed, 36 insertions, 1 deletions

diff --git a/src/components/APIConfig.module.scss b/src/components/APIConfig.module.scss
index cba61e8..5fdde76 100644
--- a/src/components/APIConfig.module.scss
+++ b/src/components/APIConfig.module.scss
@@ -16,6 +16,9 @@
 .inputs {
   display: flex;
   align-items: center;
+  input:nth-child(1) {
+    min-width: 130px;
+  }
   input:nth-child(2) {
     width: 120px;
     margin-left: 10px;
diff --git a/src/components/APIDiscovery.module.scss b/src/components/APIDiscovery.module.scss
index b1e970c..e986a1c 100644
--- a/src/components/APIDiscovery.module.scss
+++ b/src/components/APIDiscovery.module.scss
@@ -1,5 +1,9 @@
 .content {
   background: none;
+
+  @media (max-width: 768px) {
+    width: 90%;
+  }
 }
 
 .overlay {
diff --git a/src/components/Root.module.scss b/src/components/Root.module.scss
index 5ecd02e..2ca2546 100644
--- a/src/components/Root.module.scss
+++ b/src/components/Root.module.scss
@@ -5,6 +5,10 @@
   color: var(--color-text);
   min-height: 300px;
   height: 100vh;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
 }
 
 .content {
diff --git a/src/components/SideBar.module.scss b/src/components/SideBar.module.scss
index ace8a4a..bdf6d6c 100644
--- a/src/components/SideBar.module.scss
+++ b/src/components/SideBar.module.scss
@@ -12,6 +12,9 @@
   align-items: center;
   justify-content: center;
   padding: 25px 0 15px;
+  @media (max-width: 768px) {
+    padding: 0;
+  }
   color: #2a477a;
   transition: color 0.3s ease-in-out;
 
@@ -25,8 +28,15 @@
   }
 }
 
+.rows {
+  @media (max-width: 768px) {
+    display: flex;
+    justify-content: space-between;
+    overflow: scroll;
+  }
+}
+
 // a router link
-.rowActive,
 .row {
   color: var(--color-text);
   text-decoration: none;
@@ -35,6 +45,11 @@
   align-items: center;
   padding: 8px 20px;
 
+  @media (max-width: 768px) {
+    flex-direction: column;
+    // display: flex;
+  }
+
   svg {
     color: var(--color-icon);
   }
@@ -42,6 +57,11 @@
 
 .rowActive {
   background: var(--color-sb-active-row-bg);
+
+  @media (max-width: 768px) {
+    background: none;
+    border-bottom: 2px solid #387cec;
+  }
 }
 
 .label {
@@ -51,6 +71,10 @@
 .themeSwitchContainer {
   $sz: 50px;
 
+  @media (max-width: 768px) {
+    display: none;
+  }
+
   position: absolute;
   bottom: 0;
   left: 50%;