fix: constrain TOC vertical divider height to TOC content on blog post pages

[Copilot]

The left border on the TOC sidebar column spanned the full page height. The fix moves the border-left to the sticky inner TOC wrapper so the vertical divider line only spans the height of the table of contents content. The column's align-self is restored to stretch to preserve correct sticky scrolling behaviour, and the internal scrollbar is hidden while keeping scroll functionality for long TOCs.

Type of Change

• New feature (e.g., new page, component, or functionality)
• Bug fix (non-breaking change that fixes an issue)
• UI/UX improvement (design, layout, or styling updates)
• Performance optimization (e.g., code splitting, caching)
• Documentation update (README, contribution guidelines, etc.)
• Other (please specify):

Changes Made

• src/css/custom.css — Removed border-left from .blog-wrapper .container>.row>.col.col--2 (the full-height column) and restored align-self: stretch on it.
• src/css/custom.css — Added border-left: 2px solid var(--ifm-toc-border-color) to .blog-wrapper .col.col--2 > div (the sticky inner wrapper) so the vertical line only spans the TOC content height.
• src/css/custom.css — Added scrollbar-width: none and ::-webkit-scrollbar { display: none } to the sticky inner wrapper to hide the browser scrollbar while keeping overflow-y scroll for long TOCs.

/* Column — border removed, align-self restored */
.blog-wrapper .container>.row>.col.col--2 {
  align-self: stretch !important;
  /* border-left moved to sticky inner wrapper */
}

/* Sticky inner wrapper — border + scrollbar hidden */
.blog-wrapper .col.col--2 > div {
  border-left: 2px solid var(--ifm-toc-border-color) !important;
  scrollbar-width: none !important;
}
.blog-wrapper .col.col--2 > div::-webkit-scrollbar {
  display: none !important;
}

Dependencies

None.

Checklist

• My code follows the style guidelines of this project.
• I have tested my changes across major browsers and devices
• My changes do not generate new console warnings or errors .
• I ran npm run build and attached screenshot(s) in this PR.
• This is already assigned Issue to me, not an unassigned issue.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
recode-website	Ready	Preview, Comment	May 23, 2026 8:12pm

[sanjay-kv]

@copilot fix the scrolling issue happening now.

[Copilot]

@copilot fix the scrolling issue happening now.

Fixed in ef7f99a. The scrolling issue was caused by align-self: flex-start making the column too short for sticky positioning to work correctly.

The fix moves border-left from the full-height column to the sticky inner wrapper (.col.col--2 > div), restores align-self: stretch on the column, and hides the internal scrollbar with scrollbar-width: none. The vertical line now only spans the TOC content height, sticky behavior is preserved, and there's no visible scrollbar.

Screenshots:

Top of page — border matches TOC height:

Here's a local preview showing the result — the vertical line only spans the TOC, the TOC remains sticky while scrolling, and there's no scrollbar: