Replace oddbird polyfill with my own, shitter polyfill except it works consistently*

*might break in weird edge cases but it recalcs on viewport or container scroll, window resize, and when the popup opens or closes

src/components/home/playing/NowPlaying.astro

···
         content: var(--right-arrow-png) / "";
         position: sticky;
         right: 0px;
-        
+
         padding-inline: 5px;
         height: 100%;
         width: 40px;
···
   }
 
   now-playing {
-    inset: unset;
-    position: absolute;
-    left: anchor(--player left);
-    bottom: calc(anchor(--player top) + 5cqh);
+    left: var(--player-left, anchor(--player left));
+    bottom: calc(var(--player-top, anchor(--player top)) + 20px);
+    top: unset;
+    right: unset;
     text-align: left;
     font-size: 1rem;
 
···
 
   import { isNowPlaying, type nowPlaying } from "./spotify/client";
 
-  if (!CSS.supports("top", "calc(anchor(--player bottom) + 10px)")) {
-    // enable anchor polyfill
-    const { default: anchor } = await import(
-      "@oddbird/css-anchor-positioning/fn"
-    );
-
-    anchor().then(() =>
-      document
-        .querySelectorAll(".no-anchor-warning")
-        .forEach((el) =>
-          el instanceof HTMLElement
-            ? el.style.setProperty("display", "none")
-            : null,
-        ),
-    );
-  }
   /*************
    * FUNCTIONS *
    *************/
···
       prev = data;
     }
   });
+
+  /**********
+   * ANCHOR *
+   **********/
+
+  const position = () => {
+    // recalculate anchor positions
+    elements.nowPlaying.style.setProperty(
+      "--player-left",
+      elements.player.getBoundingClientRect().left + "px",
+    );
+    elements.nowPlaying.style.setProperty(
+      "--player-top",
+      window.innerHeight - elements.player.getBoundingClientRect().top + "px",
+    );
+  };
+
+  if (!CSS.supports("top", "calc(anchor(--player bottom) + 10px)")) {
+    position();
+    elements.nowPlaying.addEventListener("beforetoggle", position);
+    window.addEventListener("scroll", position);
+    elements.player.parentNode?.addEventListener("scroll", position);
+    new ResizeObserver(position).observe(document.documentElement);
+  }
+
+  // hide the warning element
+  document
+    .querySelectorAll(".no-anchor-warning")
+    .forEach((el) =>
+      el instanceof HTMLElement
+        ? el.style.setProperty("display", "none")
+        : null,
+    );
 </script>