fix(css): styles issues with popover, overflow, and scroll overflow (#1907)

* fix(style): fix toc overflow & scrolling overflow

* fix(style): fix explorer scrolling overflow

* fix(style): fix backlinks overflow & scrolling overflow

* fix(style): resolve popover overflow issue causing incomplete display

* chore: rename function to enhance readability

* fix(popover): make the backlink's id unique & use translate() instead of translateY()

quartz/components/styles/backlinks.scss

@@ -12,6 +12,8 @@
     list-style: none;
     padding: 0;
     margin: 0.5rem 0;
+    height: 6rem;
+    overscroll-behavior: contain;
 
     & > li {
       & > a {

quartz/components/styles/explorer.scss

@@ -118,6 +118,7 @@ button.desktop-explorer {
     list-style: none;
     margin: 0;
     padding: 0;
+    overscroll-behavior: contain;
 
     & li > a {
       color: var(--dark);

quartz/components/styles/popover.scss

@@ -16,9 +16,12 @@
 
 .popover {
   z-index: 999;
-  position: absolute;
+  position: fixed;
   overflow: visible;
   padding: 1rem;
+  left: 0;
+  top: 0;
+  will-change: transform;
 
   & > .popover-inner {
     position: relative;
@@ -35,6 +38,7 @@
     border-radius: 5px;
     box-shadow: 6px 6px 36px 0 rgba(0, 0, 0, 0.25);
     overflow: auto;
+    overscroll-behavior: contain;
     white-space: normal;
     user-select: none;
     cursor: default;
@@ -77,7 +81,7 @@
   }
 }
 
-a:hover .popover,
+.active-popover,
 .popover:hover {
   animation: dropin 0.3s ease;
   animation-fill-mode: forwards;

quartz/components/styles/toc.scss

@@ -50,6 +50,8 @@ ul.toc-content {
   position: relative;
   margin: 0.5rem 0;
   padding: 0;
+  height: 5rem;
+  overscroll-behavior: contain;
 
   list-style: none;
   & > li > a {