make playlists list page scrollable

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

@@ -41,8 +41,6 @@ $g-border: solid 1px $gray5;
   grid-area: l-sidebar;
   display: grid;
   grid-template-rows: 1fr max-content;
-  // border-top: none !important;
-  // border-bottom: none !important;
   border-right: $g-border;
 }
 
@@ -51,6 +49,11 @@ $g-border: solid 1px $gray5;
   border-top: $g-border;
 }
 
+.content-page {
+  margin-right: -$medium;
+  padding-right: calc(1rem - $small + 2px);
+}
+
 // ====== MODIFIERS =======
 
 #app-grid.extendWidth {

src/assets/scss/moz.scss

@@ -6,6 +6,11 @@
     padding-right: 1rem;
   }
 
+  .content-page {
+    margin-right: calc(0rem - ($medium + 4px));
+    padding-right: calc(1rem - 3px) !important;
+  }
+
   .header-list-layout {
     margin-right: calc(0rem - ($medium + 4px)) !important;
 

src/components/BottomBar.vue

@@ -149,7 +149,7 @@ const settings = useSettingsStore();
     }
 
     .info {
-      max-width: 30rem;
+      width: 30rem;
 
       .with-title {
         display: grid;

src/views/PlaylistList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="p-view" class="noscroll">
+  <div id="p-view" class="content-page">
     <div class="grid">
       <PlaylistCard
         v-for="p in pStore.playlists"
@@ -22,7 +22,9 @@ const pStore = usePStore();
 <style lang="scss">
 #p-view {
   scrollbar-color: $gray2 transparent;
-  margin: 1rem 0;
+  padding-bottom: 4rem;
+  height: 100%;
+  overflow: auto;
 
   .grid {
     grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr));