Merge branch 'main' into fix/azure-xregion-backup

Author: atovpeko

src/components/ChangelogEntry.astro

@@ -63,6 +63,7 @@ const isoDate = date;
 ---
 
 <article
+  id={id}
   class="changelog-entry"
   data-date={isoDate}
   data-tags={tags.join(',')}
@@ -75,11 +76,15 @@ const isoDate = date;
       <div class="changelog-entry__tags">
         {tags.map((tag) => <ChangelogTag type={tag} />)}
       </div>
+    </div>
+    <div class="changelog-entry__heading">
+      <slot name="heading" />
       <a href={`#${id}`} class="changelog-entry__anchor" aria-label={`Link to ${title}`}>
-        #
+        <span class="changelog-entry__anchor-icon" aria-hidden="true">
+          <svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg>
+        </span>
       </a>
     </div>
-    <slot name="heading" />
   </header>
 
   <div class="changelog-entry__content">
@@ -194,36 +199,64 @@ const isoDate = date;
     box-sizing: border-box !important;
   }
 
+  /* Title row: heading text followed by the hover-reveal chain-link anchor,
+     matching the heading anchor affordance on every other docs page. */
+  /* Starlight's heading-anchor technique: the title is inline with trailing
+     padding that reserves room for the icon, and the anchor is pulled back into
+     that space with a negative margin. So the icon sits right after the last
+     word and wraps *with* it — never flush-right on a two-line title, never
+     orphaned onto its own line. */
+  .changelog-entry__heading {
+    margin-bottom: 0.375rem;
+  }
+
+  /* The title <h2> is slotted from the MDX, so it doesn't carry this
+     component's scoped class — target it with :global or the rule won't apply. */
+  .changelog-entry__heading > :global(.changelog-entry__title) {
+    display: inline;
+    padding-inline-end: 1.55rem;
+  }
+
   .changelog-entry__anchor {
-    opacity: 0;
-    font-size: 1rem;
-    height: 1.75rem;
+    /* Hidden until the title is hovered/focused, then the icon pops up. */
     display: inline-flex;
     align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    margin: 0;
-    padding: 0;
+    margin-inline-start: -1.25rem;
+    opacity: 0;
     color: light-dark(#9ca3af, #6b7280);
     text-decoration: none;
-    transition: opacity 0.15s ease, color 0.15s ease, outline-color 0.15s ease;
+    vertical-align: middle;
+    user-select: none;
+    -webkit-user-select: none;
+    transition: opacity 0.15s ease, color 0.15s ease;
   }
 
-  .changelog-entry:hover .changelog-entry__anchor {
-    opacity: 1;
+  .changelog-entry__anchor-icon {
+    display: inline-flex;
+    line-height: 0;
+  }
+
+  .changelog-entry__anchor-icon > svg {
+    display: block;
+    width: 1.25rem;
+    height: 1.25rem;
   }
 
-  .changelog-entry__anchor:hover,
-  .changelog-entry__anchor:focus,
+  /* Reveal AND turn accent purple whenever the whole title row is hovered
+     (not just the icon) or the link is focused, matching other pages. */
+  .changelog-entry__heading:hover .changelog-entry__anchor,
   .changelog-entry__anchor:focus-visible {
     opacity: 1;
     color: light-dark(#6446fb, #f5ff80);
+  }
+
+  .changelog-entry__anchor:focus-visible {
     outline: 2px solid light-dark(#6446fb, #f5ff80);
     outline-offset: 2px;
   }
 
   .changelog-entry__title {
-    margin: 0 0 0.375rem 0;
+    margin: 0;
     font-size: 1.375rem;
     font-weight: 600;
     line-height: 1.25;

src/components/ChangelogFilter.astro

@@ -766,10 +766,14 @@ const tagOptions = [
         params.set('tags', Array.from(activeFilters).join(','));
       }
 
-      const newURL = params.toString() 
-        ? `${window.location.pathname}?${params.toString()}`
-        : window.location.pathname;
-      
+      // Preserve any deep-link hash (#entry-id) so pasting an entry link still
+      // scrolls to it — updateURL runs on load via applyFilters and would
+      // otherwise strip the fragment.
+      const hash = window.location.hash;
+      const newURL = params.toString()
+        ? `${window.location.pathname}?${params.toString()}${hash}`
+        : `${window.location.pathname}${hash}`;
+
       window.history.replaceState({}, '', newURL);
     };
 

src/components/HeadScripts/TocScrollSpy.astro

@@ -25,6 +25,36 @@
       return h + 24;
     }
 
+    /** The nearest scrollable ancestor of a TOC link (the rail column). */
+    function scrollContainerOf(el) {
+      var node = el.parentElement;
+      while (node) {
+        var oy = getComputedStyle(node).overflowY;
+        if ((oy === "auto" || oy === "scroll") && node.scrollHeight > node.clientHeight + 1)
+          return node;
+        node = node.parentElement;
+      }
+      return null;
+    }
+
+    /**
+     * Keep the active TOC link visible by scrolling ONLY the rail's own scroll
+     * container — never the window (so following the highlight can't move the
+     * page). No-ops when the TOC fits without scrolling.
+     */
+    function keepActiveVisible(link) {
+      var c = scrollContainerOf(link);
+      if (!c) return;
+      var cr = c.getBoundingClientRect();
+      var lr = link.getBoundingClientRect();
+      var margin = 16;
+      if (lr.top < cr.top + margin) {
+        c.scrollTop -= cr.top + margin - lr.top;
+      } else if (lr.bottom > cr.bottom - margin) {
+        c.scrollTop += lr.bottom - (cr.bottom - margin);
+      }
+    }
+
     /** Resolve the heading element a TOC hash points at. */
     function headingFor(hash) {
       var id = decodeURIComponent(hash.slice(1));
@@ -46,6 +76,7 @@
       return out;
     }
 
+    var lastActive = null;
     function update() {
       var entries = collect();
       if (!entries.length) return;
@@ -67,6 +98,12 @@
           link.removeAttribute("aria-current");
         }
       }
+      // When the active section changes, scroll the rail so its highlight stays
+      // visible even once it passes the bottom of the TOC's own scroll area.
+      if (active !== lastActive) {
+        lastActive = active;
+        keepActiveVisible(active);
+      }
     }
 
     /**

src/components/PageSidebar.astro

@@ -64,7 +64,9 @@ const hasLearnMore =
       width: calc(var(--sl-sidebar-width) - 2 * var(--sl-sidebar-pad-x));
       /* Give the column enough height for LearnMore's position:sticky bottom
          to "float" above the page scroll. On pages without the card this
-         just adds harmless empty space below the TOC. */
+         just adds harmless empty space below the TOC.
+         The matching max-height + internal scroll (so a long TOC stays
+         reachable) is set in `src/styles/toc.css`. */
       display: flex;
       flex-direction: column;
       min-height: calc(100dvh - var(--sl-nav-height, 4rem) - 2rem);

src/styles/toc.css

@@ -10,6 +10,21 @@
   padding-inline-start: 1rem;
 }
 
+/* Make a long "On this page" TOC scroll inside the rail.
+   PageSidebar wraps the TOC in `.sl-container` (a flex column sized to the
+   visible rail height via `min-height`, so LearnMore can float to the bottom).
+   That wrapper sits between `.right-sidebar-panel` and `starlight-toc`, so
+   Stainless's own `.right-sidebar-panel > starlight-toc { overflow-y: auto }`
+   scroll rule no longer matches and a tall TOC overflows off-screen with its
+   lower entries unreachable. Cap the wrapper at the same viewport-based height
+   and let it scroll. `overflow: auto` shows no scrollbar until it's needed, so
+   short pages are unaffected. */
+.right-sidebar-panel > .sl-container {
+  max-height: calc(100dvh - var(--sl-nav-height, 4rem) - 2rem);
+  overflow-y: auto;
+  overflow-x: clip;
+}
+
 /* Base typography */
 .right-sidebar-container .right-sidebar,
 .right-sidebar-panel,