fix 720p screens layout issue

~ add media queries
+ handle responsiveness on folder header

src/assets/scss/Global/app-grid.scss

@@ -7,12 +7,11 @@
     "l-sidebar content r-sidebar"
     "l-sidebar content r-sidebar"
     "l-sidebar content tabs";
-  align-content: center;
   max-width: 2720px;
   height: calc(100vh - 1rem);
   margin: 0 auto;
   gap: 1rem;
-  margin: $small;
+  margin: $small auto;
 }
 
 #acontent {

src/assets/scss/Global/index.scss

@@ -11,13 +11,20 @@
 }
 
 body {
-  margin: 0;
   background-color: $body;
   color: #fff;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-family: "SF Compact Display" !important;
   font-size: 1rem;
-  overflow: hidden;
   image-rendering: -webkit-optimize-contrast;
+  width: calc(100vw - 1rem);
+  overflow: hidden;
+  height: calc(100vh - 1rem);
+
+  #app {
+    width: 100%;
+    overflow: hidden;
+    margin: 0 auto;
+  }
 }

src/assets/scss/_variables.scss

@@ -67,8 +67,8 @@ $side-nav-svg: $red;
     @content;
   }
 }
-@mixin for-desktop-up {
-  @media (min-width: 1200px) {
+@mixin for-desktop-down {
+  @media (max-width: 1280px) {
     @content;
   }
 }