[v3] avoid focus-visible style being cut off by overflow hidden

.changeset/warm-glasses-smile.md

@@ -0,0 +1,7 @@
+---
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+'nextra': patch
+---
+
+avoid focus-visible style being cut off by overflow-hidden

examples/swr-site/theme.config.tsx

@@ -191,7 +191,7 @@ const config: DocsThemeConfig = {
   },
   toc: {
     extraContent: (
-      <img alt="placeholder cat" src="https://placekitten.com/g/300/200" />
+      <img alt="placeholder cat" src="https://placecats.com/300/200" />
     ),
     float: true
   }

packages/nextra-theme-docs/src/components/sidebar.tsx

@@ -183,7 +183,7 @@ function FolderImpl({ item, anchors }: FolderProps): ReactElement {
           )}
         />
       </ComponentToUse>
-      <Collapse className="ltr:_pr-0 rtl:_pl-0 _pt-1" isOpen={open}>
+      <Collapse className="_p-1" isOpen={open}>
         {Array.isArray(item.children) ? (
           <Menu
             className={cn(classes.border, 'ltr:_ml-3 rtl:_mr-3')}
@@ -400,22 +400,18 @@ export function Sidebar({
           </div>
         )}
         <FocusedItemContext.Provider value={focused}>
-          <OnFocusItemContext.Provider
-            value={item => {
-              setFocused(item)
-            }}
-          >
+          <OnFocusItemContext.Provider value={setFocused}>
             <div
               className={cn(
                 '_overflow-y-auto _overflow-x-hidden',
-                '_p-4 _grow md:_h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-menu-height))]',
+                '_grow md:_h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-menu-height))]',
                 showSidebar ? 'nextra-scrollbar' : 'no-scrollbar'
               )}
               ref={sidebarRef}
             >
               {/* without asPopover check <Collapse />'s inner.clientWidth on `layout: "raw"` will be 0 and element will not have width on initial loading */}
               {(!asPopover || !showSidebar) && (
-                <Collapse isOpen={showSidebar} horizontal>
+                <Collapse isOpen={showSidebar} horizontal className="_p-4">
                   <Menu
                     className="nextra-menu-desktop max-md:_hidden"
                     // The sidebar menu, shows only the docs directories.

packages/nextra-theme-docs/src/components/toc.tsx

@@ -57,7 +57,7 @@ export function TOC({ toc, filePath }: TOCProps): ReactElement {
   return (
     <div
       className={cn(
-        'nextra-scrollbar _sticky _top-16 _overflow-y-auto _pr-4 _pt-6 _text-sm [hyphens:auto]',
+        'nextra-scrollbar _sticky _top-16 _overflow-y-auto _px-4 _pt-6 _text-sm [hyphens:auto]',
         '_max-h-[calc(100vh-var(--nextra-navbar-height)-env(safe-area-inset-bottom))] ltr:_-mr-4 rtl:_-ml-4'
       )}
     >

packages/nextra-theme-docs/src/mdx-components.tsx

@@ -370,7 +370,7 @@ const DEFAULT_COMPONENTS: MDXComponents = {
         )
       ) : (
         <nav
-          className={cn(classes.toc, '_px-4')}
+          className={cn(classes.toc, 'ltr:_pr-4 rtl:_pl-4')}
           aria-label="table of contents"
         >
           {renderComponent(themeConfig.toc.component, {

packages/nextra/src/client/components/tabs.tsx

@@ -90,6 +90,7 @@ function Tabs_({
                 disabled={disabled}
                 className={({ selected }) =>
                   cn(
+                    index === 0 && '_ml-1', // avoid focus-visible style being cut off
                     '_mr-2 _rounded-t _p-2 _font-medium _leading-5 _transition-colors',
                     '_-mb-0.5 _select-none _border-b-2',
                     selected