more padding + margin edits

src/assets/css/global.scss

@@ -72,13 +72,13 @@ a {
 }
 
 input[type="search"] {
-  height: 2.25rem;
+  height: 2.25rem !important;
 }
 
 .l-container {
   display: grid;
   grid-template-columns: min-content 1fr min-content;
-  grid-template-rows: 2.5rem 1fr 4rem;
+  grid-template-rows: max-content 1fr max-content;
   grid-template-areas:
     "l-sidebar nav search-input"
     "l-sidebar content r-sidebar"
@@ -95,6 +95,7 @@ input[type="search"] {
 #tabs {
   grid-area: tabs;
   height: 3.5rem;
+  margin-top: -$small;
 }
 
 #acontent {

src/components/FolderView/FolderItem.vue

@@ -31,7 +31,7 @@ defineProps<{
   grid-template-columns: max-content 1fr;
   padding-right: 1rem;
   align-items: center;
-  background-color: $gray4;
+  background-color: $gray3;
   transition: all 0.2s ease;
   border-radius: 0.75rem;
 

src/components/FolderView/FolderList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="f-container rounded">
-    <div id="f-items">
+    <div id="f-items" class="rounded">
       <FolderItem
         v-for="folder in folders"
         :key="JSON.stringify(folder)"
@@ -24,9 +24,8 @@ defineProps<{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
   gap: $medium;
-  border-bottom: 1px solid $gray3;
-  padding: 1rem 0;
-  padding-top: 0;
+  padding: $small;
   margin-bottom: 1rem;
+  background-color: $gray5;
 }
 </style>

src/components/RightSideBar/SearchInput.vue

@@ -7,7 +7,7 @@
         class="rounded"
         v-model="search.query"
         placeholder="Search your library"
-        type="text"
+        type="search"
         @focus="focusThis()"
         @blur="unfocusThis()"
       />
@@ -33,8 +33,9 @@ function unfocusThis() {
 <style lang="scss">
 #gsearch-input {
   display: flex;
-  margin-bottom: $small;
-  
+  height: max-content;
+  // margin-bottom: $smaller;
+
   @include tablet-landscape {
     display: none;
   }
@@ -44,11 +45,12 @@ function unfocusThis() {
     border-radius: 0.4rem;
     position: relative;
     display: flex;
-    gap: $small;
+    background-color: $red;
     background-color: $gray4;
 
     .icon {
-      width: 2rem;
+      width: 2.25rem;
+      aspect-ratio: 1;
       background-image: url("../../assets/icons/search.svg");
       background-size: 1.5rem;
       margin-left: $smaller;

src/components/nav/Search.vue

@@ -14,9 +14,13 @@
 
 <style lang="scss">
 #nav-search {
+  // border: solid 1px $gray2;
+
   form {
     display: flex;
     gap: $small;
+    padding: 0;
+    margin: 0;
 
     input[type="search"] {
       background-color: $gray5;