From 2069adfd175612e41832591817b9d8ee4a4f14f7 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Thu, 11 Aug 2022 15:38:26 +0300
Subject: [PATCH] fix playlist and album layout responsiveness on 720p

---
 src/layouts/HeaderContentBottom.vue | 37 +++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/layouts/HeaderContentBottom.vue b/src/layouts/HeaderContentBottom.vue
index c6c7d5dc..6663146c 100644
--- a/src/layouts/HeaderContentBottom.vue
+++ b/src/layouts/HeaderContentBottom.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ap-container noscroll rounded">
+  <div class="ap-container rounded">
     <div id="ap-page">
       <header class="ap-page-header" ref="apheader">
         <slot name="header"></slot>
@@ -43,8 +43,8 @@ const props = defineProps<{
   bottomRaisedCallback?: (routeparams?: RouteParams) => void;
 }>();
 
-let elem: HTMLElement = null;
-let classlist: DOMTokenList = null;
+let elem: HTMLElement;
+let classlist: DOMTokenList;
 
 const route = useRoute();
 const apheader = ref<HTMLElement>(null);
@@ -52,8 +52,8 @@ const apbottomcontainer = ref(null);
 const bottomContainerRaised = ref(false);
 
 onMounted(() => {
-  elem = document.getElementById("ap-page");
-  classlist = elem.classList;
+  elem = document.getElementById("ap-page") as HTMLElement;
+  classlist = elem.classList as DOMTokenList;
 });
 
 onBeforeRouteUpdate((to) => {
@@ -101,6 +101,7 @@ function toggleBottom() {
 .ap-container {
   height: 100%;
   position: relative;
+  overflow: hidden;
 
   #ap-page {
     overflow: auto;
@@ -110,9 +111,9 @@ function toggleBottom() {
     grid-template-rows: 18rem 1fr;
     gap: 1rem;
 
-    .ap-page-content {
-      padding-bottom: 16rem;
-    }
+    // .ap-page-content {
+    //   padding-bottom: 16rem;
+    // }
   }
 
   .ap-page-bottom-container {
@@ -158,8 +159,7 @@ function toggleBottom() {
   }
 
   .bottomexpanded {
-    height: 32rem !important;
-    scroll-behavior: contain;
+    height: 33rem !important;
 
     .arrow {
       transform: rotate(180deg) !important;
@@ -178,5 +178,22 @@ function toggleBottom() {
   .addbottompadding {
     padding-bottom: 16rem;
   }
+
+  @include for-desktop-down {
+    overflow: auto;
+
+    #ap-page {
+      height: max-content;
+    }
+
+    .ap-page-bottom-container {
+      position: relative;
+      margin-top: 1rem;
+    }
+
+    .addbottompadding {
+      padding-bottom: 0;
+    }
+  }
 }
 </style>