Skip to content

fix: sidebar CSS overflow for long titles (#170)#230

Open
giwaov wants to merge 1 commit into0xMiden:mainfrom
giwaov:fix/sidebar-overflow-170
Open

fix: sidebar CSS overflow for long titles (#170)#230
giwaov wants to merge 1 commit into0xMiden:mainfrom
giwaov:fix/sidebar-overflow-170

Conversation

@giwaov
Copy link

@giwaov giwaov commented Mar 21, 2026

Summary

Fixes #170 long titles in the sidebar (e.g. Cross-Component Calls, Toolchain & Project Structure, Patterns & Security) were overflowing the sidebar container horizontally.

Changes

src/custom/_sidebar.css:

  • overflow-x: hidden on the sidebar container and menu element
  • .menu__link uses word-wrap, overflow-wrap, and hyphens for graceful wrapping
  • code elements inside sidebar links use word-break: break-all to prevent overflow
  • Category labels (collapsible headers) truncate with ext-overflow: ellipsis on a single line
  • Leaf item links (actual page links) wrap naturally across multiple lines for readability

Test Plan

  • Build passes with
    pm run build
  • Sidebar renders correctly with long section titles at standard viewport widths
  • No regression on short titles or mobile navbar

Fixes 0xMiden#170

Long titles in the smart-contracts section (e.g., 'Cross-Component Calls',
'Toolchain & Project Structure', 'Patterns & Security') were overflowing
the sidebar container.

Changes:
- Added overflow-x: hidden to sidebar container and menu
- Category labels now truncate with ellipsis (single line)
- Leaf item links wrap naturally for better readability
- Code elements in sidebar break-all to prevent overflow
- Added word-wrap, overflow-wrap and hyphens for graceful text handling
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Sidebar styling: long titles overflow in smart-contracts section

1 participant