From eb6b818368d9c01ef92522623b37aa29200d0bc0 Mon Sep 17 00:00:00 2001
From: Victor <435victorjavier@gmail.com>
Date: Wed, 21 Sep 2022 06:07:12 -0500
Subject: [PATCH] fix(dribbblish): bottom bar and box shadow (#840)

---
 Dribbblish/dribbblish.js |  6 ++----
 Dribbblish/user.css      | 21 ++++++++++++++-------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/Dribbblish/dribbblish.js b/Dribbblish/dribbblish.js
index 691a229..49c3e2a 100644
--- a/Dribbblish/dribbblish.js
+++ b/Dribbblish/dribbblish.js
@@ -93,10 +93,10 @@ waitForElement([
         .observe(listElem, {childList: true});
 });
 
-waitForElement([".Root__main-view"], ([mainView]) => {
+waitForElement([".Root__top-container"], ([topContainer]) => {
     const shadow = document.createElement("div");
     shadow.id = "dribbblish-back-shadow";
-    mainView.prepend(shadow);
+    topContainer.prepend(shadow);
 });
 
 waitForElement([".main-rootlist-rootlistPlaylistsScrollNode"], (queries) => {
@@ -130,8 +130,6 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
     function updateVariable([ event ]) {
         document.documentElement.style.setProperty(
             "--main-view-width", event.contentRect.width + "px");
-        document.documentElement.style.setProperty(
-            "--main-view-height", event.contentRect.height + "px");
         if (event.contentRect.width < 700) {
             document.documentElement.classList.add("minimal-player");
         } else {
diff --git a/Dribbblish/user.css b/Dribbblish/user.css
index 5153edb..6995eff 100644
--- a/Dribbblish/user.css
+++ b/Dribbblish/user.css
@@ -593,12 +593,10 @@ li.GlueDropTarget {
     padding-bottom: 56px;
 }
 #dribbblish-back-shadow {
-    position: fixed;
-    width: var(--main-view-width);
-    height: calc(var(--main-view-height) + var(--bar-height));
+    z-index: 2;
+    grid-area: main-view / main-view / now-playing-bar / main-view;
     box-shadow: 0 0 10px 3px #0000003b;
     border-radius: var(--main-corner-radius);
-    z-index: 2;
     pointer-events: none;
 }
 
@@ -712,14 +710,23 @@ li.GlueDropTarget {
 }
 
 /** Grid */
+
 .Root__top-container {
-    grid-template-areas:
-        "nav-bar main-view buddy-feed"
-        "nav-bar now-playing-bar buddy-feed";
     padding: var(--main-gap) 0;
 }
 
+.spotify__container--is-desktop.buddyfeed-visible .Root__top-container {
+    grid-template-areas:
+        "top-bar top-bar top-bar"
+        "nav-bar main-view buddy-feed"
+        "nav-bar now-playing-bar buddy-feed";
+}
+
 html:not(.buddyfeed-visible) .Root__top-container {
+    grid-template-areas:
+        "top-bar top-bar"
+        "nav-bar main-view"
+        "nav-bar now-playing-bar";
     padding-right: var(--main-gap);
 }