[v3] use overflow-x-auto instead overflow-x-scroll for <Table /> (

#2828)

* aa

* aa

.changeset/long-years-occur.md

@@ -0,0 +1,7 @@
+---
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+'nextra': patch
+---
+
+use `overflow-x-auto` instead `overflow-x-scroll` for `<Table />`

.changeset/three-pandas-joke.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+fix `<Bleed />` overflows incorrectly in firefox

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

@@ -56,7 +56,8 @@ export function TOC({ toc, filePath }: TOCProps): ReactElement {
     <div
       className={cn(
         'nextra-scrollbar _sticky _top-16 _overflow-y-auto _pr-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'
+        '_max-h-[calc(100vh-var(--nextra-navbar-height)-env(safe-area-inset-bottom))] ltr:_-mr-4 rtl:_-ml-4',
+        '_z-[-1]' // for firefox https://github.com/shuding/nextra/issues/2824
       )}
     >
       {hasHeadings && (

packages/nextra-theme-docs/src/index.tsx

@@ -105,6 +105,4 @@ export {
   LocaleSwitch
 } from './components'
 
-export {
-  useMenu
-} from './contexts'
+export { useMenu } from './contexts'

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

@@ -5,5 +5,5 @@ export const Table = ({
   className = '',
   ...props
 }: ComponentProps<'table'>) => (
-  <table className={cn('_block _overflow-x-scroll', className)} {...props} />
+  <table className={cn('_block _overflow-x-auto', className)} {...props} />
 )