Skip to content

Commit b2ed5ec

Browse files
committed
fix: sidebar CSS overflow for long titles
Fixes #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
1 parent fcd4ecd commit b2ed5ec

1 file changed

Lines changed: 48 additions & 0 deletions

File tree

src/custom/_sidebar.css

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -342,3 +342,51 @@ aside[class*="docSidebarContainer"] .menu__caret {
342342
.navbar-sidebar .menu__list-item-collapsible {
343343
border-radius: var(--radius-md);
344344
}
345+
346+
/* ==========================================
347+
4.6) SIDEBAR OVERFLOW HANDLING
348+
Fixes #170 - long titles overflow in sidebar
349+
========================================== */
350+
351+
/* Ensure sidebar container clips overflow */
352+
aside[class*="docSidebarContainer"] {
353+
overflow-x: hidden;
354+
}
355+
356+
/* Main menu element clips content */
357+
aside[class*="docSidebarContainer"] .menu {
358+
overflow-x: hidden;
359+
}
360+
361+
/* Menu links handle long text gracefully */
362+
.theme-doc-sidebar-menu .menu__link {
363+
/* Allow natural word wrapping for better readability */
364+
word-wrap: break-word;
365+
overflow-wrap: break-word;
366+
hyphens: auto;
367+
/* Prevent horizontal overflow */
368+
max-width: 100%;
369+
}
370+
371+
/* Handle code elements within sidebar links */
372+
.theme-doc-sidebar-menu .menu__link code {
373+
/* Prevent code from causing overflow */
374+
word-break: break-all;
375+
white-space: normal;
376+
/* Reduce code styling in sidebar for compactness */
377+
font-size: 0.9em;
378+
padding: 0.1em 0.3em;
379+
}
380+
381+
/* Category labels also need overflow handling */
382+
.menu__list-item-collapsible > .menu__link {
383+
overflow: hidden;
384+
text-overflow: ellipsis;
385+
/* Single line truncation for category headers */
386+
white-space: nowrap;
387+
}
388+
389+
/* But leaf items (actual page links) can wrap to multiple lines */
390+
.theme-doc-sidebar-item-link .menu__link {
391+
white-space: normal;
392+
}

0 commit comments

Comments
 (0)