From 13cb9c21e2b3ff6e768b3feea813726fe3ac0f24 Mon Sep 17 00:00:00 2001
From: giwaov <giwavictor9@gmail.com>
Date: Mon, 9 Mar 2026 08:35:59 +0100
Subject: [PATCH] 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
---
 src/custom/_sidebar.css | 48 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/custom/_sidebar.css b/src/custom/_sidebar.css
index d066f5c6..26ee23c1 100644
--- a/src/custom/_sidebar.css
+++ b/src/custom/_sidebar.css
@@ -342,3 +342,51 @@ aside[class*="docSidebarContainer"] .menu__caret {
 .navbar-sidebar .menu__list-item-collapsible {
   border-radius: var(--radius-md);
 }
+
+/* ==========================================
+   4.6) SIDEBAR OVERFLOW HANDLING
+   Fixes #170 - long titles overflow in sidebar
+   ========================================== */
+
+/* Ensure sidebar container clips overflow */
+aside[class*="docSidebarContainer"] {
+  overflow-x: hidden;
+}
+
+/* Main menu element clips content */
+aside[class*="docSidebarContainer"] .menu {
+  overflow-x: hidden;
+}
+
+/* Menu links handle long text gracefully */
+.theme-doc-sidebar-menu .menu__link {
+  /* Allow natural word wrapping for better readability */
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  /* Prevent horizontal overflow */
+  max-width: 100%;
+}
+
+/* Handle code elements within sidebar links */
+.theme-doc-sidebar-menu .menu__link code {
+  /* Prevent code from causing overflow */
+  word-break: break-all;
+  white-space: normal;
+  /* Reduce code styling in sidebar for compactness */
+  font-size: 0.9em;
+  padding: 0.1em 0.3em;
+}
+
+/* Category labels also need overflow handling */
+.menu__list-item-collapsible > .menu__link {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* Single line truncation for category headers */
+  white-space: nowrap;
+}
+
+/* But leaf items (actual page links) can wrap to multiple lines */
+.theme-doc-sidebar-item-link .menu__link {
+  white-space: normal;
+}