refactor app grid

- make content container scrollable, more flexible

src/App.vue

@@ -11,7 +11,7 @@
       </div>
     </div>
     <NavBar />
-    <div class="content">
+    <div id="acontent">
       <router-view />
     </div>
     <SearchInput />

src/assets/css/global.scss

@@ -67,7 +67,7 @@ a {
 .l-container {
   display: grid;
   grid-template-columns: min-content 1fr min-content;
-  grid-template-rows: 3rem 1fr 1fr;
+  grid-template-rows: 3.5rem 1fr 1fr;
   grid-auto-flow: row;
   grid-template-areas:
     "l-sidebar nav search-input"
@@ -129,10 +129,11 @@ a {
   display: flex;
 }
 
-.content {
+#acontent {
   grid-area: content;
-  padding: 0;
   max-width: 1504px;
+  padding: $small;
+  overflow: auto;
 
   .nav {
     margin: $small;

src/components/nav/NavBar.vue

@@ -114,7 +114,7 @@ onMounted(() => {
   display: grid;
   grid-template-columns: 1fr min-content max-content;
   padding-bottom: 1rem;
-  margin: $small $small 0 $small;
+  margin: $small $small 0 0;
   border-bottom: 1px solid $gray3;
   height: 3rem;
 

src/views/AlbumView.vue

@@ -39,10 +39,6 @@ onBeforeRouteUpdate(async (to) => {
 
 <style lang="scss">
 .al-view {
-  height: calc(100% - 1rem);
-  overflow: auto;
-  margin: $small;
-  margin-right: 0;
   scrollbar-width: none;
 
   .songs {

src/views/FolderView.vue

@@ -37,8 +37,6 @@ onBeforeRouteUpdate((to) => {
 <style lang="scss">
 #f-view-parent {
   position: relative;
-  padding: 0 0 0 $small;
-  margin-top: $small;
 
   .h {
     font-size: 2rem;

src/views/PlaylistView.vue

@@ -38,11 +38,6 @@ const playlist = usePTrackStore();
 
 <style lang="scss">
 .playlist-view {
-  height: calc(100% - 0.5rem);
-  margin-top: $small;
-  margin-left: $small;
-  // border: solid 1px;
-
   &::-webkit-scrollbar {
     display: none;
   }