From 4c638d0610953d9518e9351b931434ee6f40bb04 Mon Sep 17 00:00:00 2001 From: Yam C Borodetsky Date: Wed, 2 Sep 2026 21:50:50 +0500 Subject: [PATCH 1/3] fix(fumadocs-ui): prevent sidebar focus ring clipping with overflow-clip --- .changeset/fix-sidebar-tab-ring-overflow.md | 7 +++++++ apps/www/app/docs/docs-chrome.css | 3 ++- packages/fumadocs-ui/css/theme.css | 3 ++- packages/fumadocs-ui/src/components/drill-in-sidebar.tsx | 2 +- 4 files changed, 12 insertions(+), 3 deletions(-) create mode 100644 .changeset/fix-sidebar-tab-ring-overflow.md diff --git a/.changeset/fix-sidebar-tab-ring-overflow.md b/.changeset/fix-sidebar-tab-ring-overflow.md new file mode 100644 index 000000000..ed15fc814 --- /dev/null +++ b/.changeset/fix-sidebar-tab-ring-overflow.md @@ -0,0 +1,7 @@ +--- +"@arkenv/fumadocs-ui": patch +--- + +#### Fix keyboard focus ring truncation in sidebar navigation + +The drill-in sidebar slide container now uses `overflow: clip` with an expanded clip margin instead of `overflow: hidden`, preventing keyboard focus rings from being clipped along the left and right edges. diff --git a/apps/www/app/docs/docs-chrome.css b/apps/www/app/docs/docs-chrome.css index ab86c502a..ee3f81ea8 100644 --- a/apps/www/app/docs/docs-chrome.css +++ b/apps/www/app/docs/docs-chrome.css @@ -37,7 +37,8 @@ } [data-docs-sidebar-slide] { - overflow: hidden; + overflow: clip; + overflow-clip-margin: 0.5rem; } /* diff --git a/packages/fumadocs-ui/css/theme.css b/packages/fumadocs-ui/css/theme.css index 9e36746e1..234043f7d 100644 --- a/packages/fumadocs-ui/css/theme.css +++ b/packages/fumadocs-ui/css/theme.css @@ -459,7 +459,8 @@ aside .theme-toggle { */ #nd-sidebar [data-docs-sidebar-slide], #nd-sidebar-mobile [data-docs-sidebar-slide] { - overflow: hidden; + overflow: clip; + overflow-clip-margin: 0.5rem; } #nd-sidebar [data-sidebar-mode], diff --git a/packages/fumadocs-ui/src/components/drill-in-sidebar.tsx b/packages/fumadocs-ui/src/components/drill-in-sidebar.tsx index 68092e357..6d19c8643 100644 --- a/packages/fumadocs-ui/src/components/drill-in-sidebar.tsx +++ b/packages/fumadocs-ui/src/components/drill-in-sidebar.tsx @@ -503,7 +503,7 @@ function DrillInTree() { return (
From 938150bb85b2904211494884e17c492a40397a74 Mon Sep 17 00:00:00 2001 From: Yam C Borodetsky Date: Wed, 2 Sep 2026 22:23:02 +0500 Subject: [PATCH 2/3] fix(fumadocs-ui): add WebKit fallback for overflow-clip-margin in sidebar --- apps/www/app/docs/docs-chrome.css | 14 ++++++++++++++ packages/fumadocs-ui/css/theme.css | 24 +++++++++++++++++++++++- 2 files changed, 37 insertions(+), 1 deletion(-) diff --git a/apps/www/app/docs/docs-chrome.css b/apps/www/app/docs/docs-chrome.css index ee3f81ea8..c28916a45 100644 --- a/apps/www/app/docs/docs-chrome.css +++ b/apps/www/app/docs/docs-chrome.css @@ -41,6 +41,20 @@ overflow-clip-margin: 0.5rem; } +@supports not (overflow-clip-margin: 0.5rem) { + [data-docs-sidebar-slide] { + margin-inline: -0.25rem; + padding-inline: 0.25rem; + } + + [data-docs-sidebar-slide] > nav { + width: auto; + left: 0.25rem; + right: 0.25rem; + inset-inline: 0.25rem; + } +} + /* * Right-middle + far-right. No inline padding on the column so the TOC spy * can sit on the start rail and the feedback hairline can span rail-to-rail. diff --git a/packages/fumadocs-ui/css/theme.css b/packages/fumadocs-ui/css/theme.css index 234043f7d..d92fcbfd0 100644 --- a/packages/fumadocs-ui/css/theme.css +++ b/packages/fumadocs-ui/css/theme.css @@ -416,7 +416,7 @@ aside .theme-toggle { color 150ms, background-color 150ms; /* Kill the UA outline (tinted by global `outline-ring/50`) — it is - rectangular and gets clipped by the drill-in `overflow-hidden` pane. */ + rectangular and gets clipped by the drill-in slide pane. */ outline: none; } @@ -463,6 +463,28 @@ aside .theme-toggle { overflow-clip-margin: 0.5rem; } +/* + * WebKit / Safari fallback: WebKit supports overflow: clip but does not yet + * support overflow-clip-margin (WebKit bug 236153). Pad the slide container + * and compensate on child navs so the 4px focus ring paints inside the + * element padding box while preserving exact 24px active-pill rail alignment. + */ +@supports not (overflow-clip-margin: 0.5rem) { + #nd-sidebar [data-docs-sidebar-slide], + #nd-sidebar-mobile [data-docs-sidebar-slide] { + margin-inline: -0.25rem; + padding-inline: 0.25rem; + } + + #nd-sidebar [data-docs-sidebar-slide] > nav, + #nd-sidebar-mobile [data-docs-sidebar-slide] > nav { + width: auto; + left: 0.25rem; + right: 0.25rem; + inset-inline: 0.25rem; + } +} + #nd-sidebar [data-sidebar-mode], #nd-sidebar-mobile [data-sidebar-mode] { padding-block: 0.5rem; From 195e2d6b30c228f74efab4acab6130c35885a463 Mon Sep 17 00:00:00 2001 From: Yam C Borodetsky Date: Wed, 2 Sep 2026 22:46:13 +0500 Subject: [PATCH 3/3] fix(fumadocs-ui): scope WebKit fallback nav inset to absolute panels --- apps/www/app/docs/docs-chrome.css | 4 +--- packages/fumadocs-ui/css/theme.css | 10 ++++------ 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/apps/www/app/docs/docs-chrome.css b/apps/www/app/docs/docs-chrome.css index c28916a45..89cb8ec11 100644 --- a/apps/www/app/docs/docs-chrome.css +++ b/apps/www/app/docs/docs-chrome.css @@ -47,10 +47,8 @@ padding-inline: 0.25rem; } - [data-docs-sidebar-slide] > nav { + [data-docs-sidebar-slide] > nav.absolute { width: auto; - left: 0.25rem; - right: 0.25rem; inset-inline: 0.25rem; } } diff --git a/packages/fumadocs-ui/css/theme.css b/packages/fumadocs-ui/css/theme.css index d92fcbfd0..be6c5509b 100644 --- a/packages/fumadocs-ui/css/theme.css +++ b/packages/fumadocs-ui/css/theme.css @@ -466,8 +466,8 @@ aside .theme-toggle { /* * WebKit / Safari fallback: WebKit supports overflow: clip but does not yet * support overflow-clip-margin (WebKit bug 236153). Pad the slide container - * and compensate on child navs so the 4px focus ring paints inside the - * element padding box while preserving exact 24px active-pill rail alignment. + * and compensate on absolutely-positioned child panels so the 4px focus ring + * paints inside the element padding box without shifting resting or drilled navs. */ @supports not (overflow-clip-margin: 0.5rem) { #nd-sidebar [data-docs-sidebar-slide], @@ -476,11 +476,9 @@ aside .theme-toggle { padding-inline: 0.25rem; } - #nd-sidebar [data-docs-sidebar-slide] > nav, - #nd-sidebar-mobile [data-docs-sidebar-slide] > nav { + #nd-sidebar [data-docs-sidebar-slide] > nav.absolute, + #nd-sidebar-mobile [data-docs-sidebar-slide] > nav.absolute { width: auto; - left: 0.25rem; - right: 0.25rem; inset-inline: 0.25rem; } }