set global margin on the main app grid

+ refactor margins and paddings in some components

src/assets/css/BottomBar/BottomBar.scss

@@ -4,7 +4,6 @@
 
   .grid {
     background-color: $primary;
-    display: grid;
     height: 100%;
     padding-right: $small;
 

src/assets/css/global.scss

@@ -1,6 +1,6 @@
 @import "../css/ProgressBar.scss";
 @import "mixins.scss";
-@import "./moz.scss";
+// @import "./moz.scss";
 
 :root {
   --separator: #ffffff46;
@@ -71,32 +71,37 @@ a {
   display: none;
 }
 
+input[type="search"] {
+  height: 2.25rem;
+}
+
 .l-container {
   display: grid;
   grid-template-columns: min-content 1fr min-content;
-  grid-template-rows: 3.5rem 1fr 1fr;
+  grid-template-rows: 2.5rem 1fr 4rem;
-  grid-auto-flow: row;
   grid-template-areas:
     "l-sidebar nav search-input"
     "l-sidebar content r-sidebar"
     "l-sidebar content r-sidebar"
     "l-sidebar content tabs";
-  width: 100%;
   align-content: center;
   max-width: 2720px;
-  height: 100vh;
+  height: calc(100vh - 1rem);
   margin: 0 auto;
-  gap: $small;
+  gap: 1rem;
+  margin: $small;
+}
+
+#tabs {
+  grid-area: tabs;
+  height: 3.5rem;
 }
 
 #acontent {
   grid-area: content;
-  width: calc(100% + $small);
   max-width: 1955px;
   overflow: hidden auto;
-  margin: 0 auto;
+  margin-top: -$small;
-  padding-right: $medium;
-  margin-bottom: $small;
 
   .nav {
     margin: $small;
@@ -124,7 +129,6 @@ a {
   width: 17rem;
   grid-area: l-sidebar;
   background-color: $black;
-  margin: $small;
   padding: 1rem;
 }
 
@@ -155,7 +159,8 @@ a {
 
 .r-sidebar {
   grid-area: r-sidebar;
-  // border-left: solid 1px $gray3;
+  margin-top: -$small;
+  width: 29rem;
 }
 
 .image {
@@ -194,7 +199,7 @@ a {
 /* Track */
 
 ::-webkit-scrollbar-track {
-  background: rgba(51, 51, 51, 0.459);
+  background: transparent;
   border-radius: 1rem;
 }
 
@@ -244,6 +249,7 @@ a {
     background-position: 0 38%;
   }
 }
+
 @keyframes similarAlbums {
   0% {
     background-position: 0 38%;

src/components/FolderView/FolderList.vue

@@ -26,7 +26,7 @@ defineProps<{
   gap: $medium;
   border-bottom: 1px solid $gray3;
   padding: 1rem 0;
-  padding-top: $small;
+  padding-top: 0;
   margin-bottom: 1rem;
 }
 </style>

src/components/RightSideBar/Home/Main.vue

@@ -8,8 +8,6 @@
 <style lang="scss">
 .r-home {
   height: calc(100% - 1rem);
-  padding: 0 $small $small 0;
-  margin-top: $small;
 }
 </style>
 

src/components/RightSideBar/Main.vue

@@ -27,9 +27,7 @@ const tabs = useTabStore();
 
 <style lang="scss">
 .r-sidebar {
-  width: 29em;
+
-  background-color: rgba(4, 12, 34, 0.103);
-  padding: 0 $small;
 
   @include phone-only {
     display: none;
@@ -64,18 +62,6 @@ const tabs = useTabStore();
         height: 100%;
       }
     }
-
-    .tab-keys {
-      display: none;
-      width: 3rem;
-      right: 0;
-      height: 100%;
-      position: absolute;
-      grid-area: tabs;
-      border-radius: 0;
-      overflow: hidden;
-      border-left: solid 1px $gray;
-    }
   }
 }
 </style>

src/components/RightSideBar/Search/AlbumGrid.vue

@@ -36,7 +36,6 @@ function loadMore() {
   }
 
   .grid {
-    display: grid;
     grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
     flex-wrap: wrap;
     gap: 0.75rem;

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -35,7 +35,6 @@ function loadMore() {
   }
 
   .grid {
-    display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 0.75rem;
   }

src/components/RightSideBar/Search/PlaylistsGrid.vue

@@ -36,7 +36,6 @@ function loadMore() {
   }
 
   .grid {
-    display: grid;
     grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
     flex-wrap: wrap;
     gap: 0.75rem;

src/components/RightSideBar/SearchInput.vue

@@ -32,8 +32,8 @@ function unfocusThis() {
 
 <style lang="scss">
 #gsearch-input {
-  padding: $small;
   display: flex;
+  margin-bottom: $small;
   
   @include tablet-landscape {
     display: none;
@@ -46,7 +46,6 @@ function unfocusThis() {
     display: flex;
     gap: $small;
     background-color: $gray4;
-    height: 2.25rem;
 
     .icon {
       width: 2rem;

src/components/RightSideBar/Tabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tabs">
+  <div class="tabs" id="tabs">
     <div class="cont rounded">
       <div
         v-for="tab in tabs.tabs"
@@ -22,8 +22,8 @@ const tabs = useTabStore();
 
 <style lang="scss">
 .tabs {
-  padding: $small;
+  grid-area: tabs;
-  height: 4.25rem;
+  height: 100%;
 
   .cont {
     background-color: $black;
@@ -58,7 +58,6 @@ const tabs = useTabStore();
     .t-item {
       background-color: transparent;
     }
-
   }
 
   .search {

src/components/nav/NavBar.vue

@@ -16,7 +16,6 @@
       <Loader />
     </div>
     <div class="right">
-      <div class="more image"></div>
       <Search />
     </div>
   </div>
@@ -78,16 +77,12 @@ watch(
 );
 </script>
 
-<!-- !!use nav store to sync the title component!! -->
-
 <style lang="scss">
 .topnav {
   display: grid;
   grid-template-columns: 1fr min-content max-content;
-  padding-bottom: 1rem;
+  // border-bottom: 1px solid $gray3;
-  margin: $small $small 0 0;
+  // padding-bottom: $small;
-  border-bottom: 1px solid $gray3;
-  height: 3rem;
 
   .left {
     display: grid;
@@ -115,16 +110,6 @@ watch(
     width: 100%;
     display: flex;
     gap: $small;
-
-    .more {
-      width: 2.25rem;
-      aspect-ratio: 1;
-      height: 100%;
-      background-color: $gray5;
-      background-image: url("../../assets/icons/more.svg");
-      transform: rotate(90deg);
-      border-radius: $small;
-    }
   }
 }
 </style>

src/views/FolderView.vue

@@ -51,7 +51,6 @@ onBeforeRouteUpdate((to, from) => {
 
 #scrollable {
   overflow-y: auto;
-  height: calc(100% - $small);
   scrollbar-color: grey transparent;
 
   @include phone-only {

src/views/Playlists.vue

@@ -25,7 +25,6 @@ const pStore = usePStore();
   scrollbar-color: $gray2 transparent;
 
   .grid {
-    display: grid;
     grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
     gap: 1rem;
   }