address diff between local build and vercel.

Signed-off-by: bgravenorst <[email protected]>

Author: bgravenorst

src/scss/theme/_sidebar.scss

@@ -274,6 +274,32 @@
     }
   }
 
+  /**
+   * Vercel-only "overlap" on level 2+ was observed on active (non-collapsible) link rows.
+   * Those rows are plain `li > a.menu__link--active` (no `.menu__list-item--active` class),
+   * so if the anchor ever ends up shrink-to-fit, the background gradient will look clipped
+   * / visually inconsistent.
+   *
+   * Fix: apply the active background to the full-width `li` instead of the `a`.
+   * We keep this gated behind `:has()` support; without it, behavior remains unchanged.
+   */
+  @supports selector(:has(*)) {
+    &__list-item:has(> a.menu__link.menu__link--active) {
+      background-color: transparent;
+      background-image: linear-gradient(
+        to right,
+        transparent 0,
+        transparent 0.5rem,
+        var(--ifm-menu-color-background-active, var(--ifm-hover-overlay)) 0.5rem
+      );
+    }
+
+    /* Avoid double-highlighting: the `li` owns the active background in modern browsers. */
+    &__list-item:has(> a.menu__link.menu__link--active) > a.menu__link.menu__link--active {
+      background-image: none;
+    }
+  }
+
   &__caret {
     padding: 1rem 2rem 1rem 1rem;
     opacity: 0.25;