From 71db15c16a0896f2b8300ad58e80a4014b2c84de Mon Sep 17 00:00:00 2001
From: Martynas Prascevicius <mpcode@mpcode.dev>
Date: Sat, 11 Apr 2026 12:14:26 +0300
Subject: [PATCH] fix(docs): allow page scroll to chain past code blocks

Resolves #15. Removes `overscroll-y-contain` from the syntax-highlighted
code block components used in component documentation pages.

The Tailwind class `overscroll-behavior-y: contain` was preventing scroll
chaining when the cursor was inside an overflowing code block: trackpad
momentum was being absorbed by the inner element instead of bubbling up
to the page, leaving the page unscrollable for several seconds.

Removing it restores the browser's default scroll-chaining behaviour so
the page continues scrolling once the code block reaches its boundary.

Sheet, Drawer, and sidenav demos still keep `overscroll-y-contain`
because they are interactive overlays where the trap is intentional.
---
 app_crates/app_components/src/tree_view.rs                      | 2 +-
 .../src/leptos/components/syntect_highlighter_code.rs           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app_crates/app_components/src/tree_view.rs b/app_crates/app_components/src/tree_view.rs
index ad089cd..f556301 100644
--- a/app_crates/app_components/src/tree_view.rs
+++ b/app_crates/app_components/src/tree_view.rs
@@ -127,7 +127,7 @@ pub fn FileRendererHighlight(
                 class="peer"
                 checked=checked
                 on:change=move |_| {
-                    const HIGHLIGHT_CLASS: &str = "h-full max-h-[370px] overflow-y-auto overscroll-y-contain whitespace-pre-wrap p-4 [&_span]:text-xs rounded-md bg-muted";
+                    const HIGHLIGHT_CLASS: &str = "h-full max-h-[370px] overflow-y-auto whitespace-pre-wrap p-4 [&_span]:text-xs rounded-md bg-muted";
                     let highlighted_content = highlight_code(&content, language, Some(name));
                     let html = format!(
                         "<div><h3 class='font-semibold mb-2'>{name}</h3><pre class='{HIGHLIGHT_CLASS}' data-name='{SYNTECT_HIGHLIGHTER_CODE}'><code>{highlighted_content}</code></pre></div>",
diff --git a/crates/_markdown_crate/src/leptos/components/syntect_highlighter_code.rs b/crates/_markdown_crate/src/leptos/components/syntect_highlighter_code.rs
index 05f56f7..ffbea5d 100644
--- a/crates/_markdown_crate/src/leptos/components/syntect_highlighter_code.rs
+++ b/crates/_markdown_crate/src/leptos/components/syntect_highlighter_code.rs
@@ -13,7 +13,7 @@ pub fn SyntectHighlighterCode(
 ) -> impl IntoView {
     let merged_class = tw_merge!(
         if show_scrollbar_on_hover { "scrollbar__on_hover" } else { "" },
-        "h-full max-h-[370px] overflow-y-auto overscroll-y-contain",
+        "h-full max-h-[370px] overflow-y-auto",
         "whitespace-pre-wrap p-4 [&_span]:text-xs rounded-md bg-muted",
         class
     );