add overflow-x-scroll for tables (#795)

* add `overflow-x-scroll` for tables * reuse nextra's scrollbar-y styles for scrollbar-x, adjust sidebar's scrollbar-y (#797)
shuding · Sep 2, 2022 · c3e6227 · c3e6227
1 parent ff8967c
commit c3e6227
Show file tree

Hide file tree

Showing 11 changed files with 75 additions and 59 deletions.
diff --git a/.changeset/hungry-files-drive.md b/.changeset/hungry-files-drive.md
@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+add `overflow-x-scroll` for tables
diff --git a/.changeset/wise-fireants-hunt.md b/.changeset/wise-fireants-hunt.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+reuse nextra's scrollbar-y styles for scrollbar-x, adjust sidebar's scrollbar-y
diff --git a/examples/blog/pages/posts/table.mdx b/examples/blog/pages/posts/table.mdx
@@ -8,8 +8,8 @@ author: Dimitri POSTOLOV
 
 ## Test table
 
-| Left | Center | Right |
-| ---- | :----: | ----: |
-| ss2  |  333   |  3232 |
-|      |  222   |  3232 |
-|      |   23   |       |
+| Left | Center | Right | Right | Right | Right | Right | Right | Right | Right |
+| ---- | :----: | ----: | ----: | ----: | ----: | ----: | ----: | ----: | ----: |
+| ss2  |  333   |  3232 |  3232 |  3232 |  3232 |  3232 |  3232 |  3232 |  3232 |
+|      |  222   |  3232 |  3232 |  3232 |  3232 |  3232 |  3232 |  3232 |  3232 |
+|      |   23   |       |       |       |       |       |       |       |       |
diff --git a/packages/nextra-theme-blog/src/mdx-theme.tsx b/packages/nextra-theme-blog/src/mdx-theme.tsx
@@ -12,7 +12,7 @@ import React, {
 import { MDXProvider } from '@mdx-js/react'
 import Link from 'next/link'
 import { createPortal } from 'react-dom'
-import { Code, Pre, Td, Th, Tr } from 'nextra/components'
+import { Code, Pre, Table, Td, Th, Tr } from 'nextra/components'
 import { useBlogContext } from './blog-context'
 
 export const HeadingContext = createContext<
@@ -68,19 +68,17 @@ const components = {
   h5: createHeaderLink('h5'),
   h6: createHeaderLink('h6'),
   a: A,
-  pre({ children, ...props }: ComponentProps<'pre'>) {
-    return (
-      <div className="not-prose">
-        <Pre {...props}>{children}</Pre>
-      </div>
-    )
-  },
+  pre: ({ children, ...props }: ComponentProps<'pre'>) => (
+    <div className="not-prose">
+      <Pre {...props}>{children}</Pre>
+    </div>
+  ),
   tr: Tr,
   th: Th,
   td: Td,
-  table(props: ComponentProps<'table'>) {
-    return <table className="not-prose" {...props} />
-  },
+  table: (props: ComponentProps<'table'>) => (
+    <Table className="not-prose" {...props} />
+  ),
   code: Code
 }
 

diff --git a/packages/nextra-theme-docs/css/scrollbar.css b/packages/nextra-theme-docs/css/scrollbar.css
@@ -1,41 +1,32 @@
 .nextra-scrollbar {
   scrollbar-gutter: stable;
   &::-webkit-scrollbar {
-    width: 6px;
+    @apply w-1.5 h-1.5;
   }
   &::-webkit-scrollbar-track {
-    margin-top: 20px;
-    margin-bottom: 16px;
-    background-color: transparent;
+    @apply bg-transparent my-5;
   }
   &::-webkit-scrollbar-thumb {
-    box-shadow: inset 0 0 0 5px rgba(128, 128, 128, 0);
-    border-radius: 20px;
+    @apply rounded-[20px];
   }
   &:hover::-webkit-scrollbar-thumb {
-    box-shadow: inset 0 0 0 5px rgba(128, 128, 128, 0.2);
-    &:hover {
-      box-shadow: inset 0 0 0 5px rgba(128, 128, 128, 0.4);
-    }
+    @apply shadow-[inset_0_0_0_5px_var(--tw-shadow-color)];
+    @apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
   }
-}
-
-.nextra-sidebar-container.with-menu.nextra-scrollbar::-webkit-scrollbar-track {
-  margin-bottom: 76px;
-}
 
-@media (max-width: 767px) {
-  .nextra-container .nextra-scrollbar {
-    scrollbar-gutter: auto;
+  @media (max-width: 767px) {
+    .nextra-container & {
+      scrollbar-gutter: auto;
+    }
   }
 }
 
 /* Hide scrollbar */
 .no-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
 
   &::-webkit-scrollbar {
-    display: none; /* Chrome, Safari and Opera */
+    @apply hidden; /* Chrome, Safari and Opera */
   }
 }
diff --git a/packages/nextra-theme-docs/src/components/head.tsx b/packages/nextra-theme-docs/src/components/head.tsx
@@ -53,6 +53,8 @@ export function Head(): ReactElement {
       <style>{`
         :root {
           --nextra-primary-hue: ${lightHue}deg;
+          --nextra-navbar-height: 4rem;
+          --nextra-menu-height: 3.75rem;
         }
         
         .dark {

diff --git a/packages/nextra-theme-docs/src/components/navbar.tsx b/packages/nextra-theme-docs/src/components/navbar.tsx
@@ -80,7 +80,7 @@ export function Navbar({ flatDirectories, items }: NavBarProps): ReactElement {
   return (
     <div className="nextra-nav-container sticky top-0 z-20 w-full bg-transparent">
       <div className="nextra-nav-container-blur pointer-events-none absolute h-full w-full bg-white dark:bg-dark" />
-      <nav className="mx-auto flex h-16 max-w-[90rem] items-center justify-end gap-2 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]">
+      <nav className="mx-auto flex h-[var(--nextra-navbar-height)] max-w-[90rem] items-center justify-end gap-2 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]">
         <Anchor
           href="/"
           className="flex ltr:mr-auto rtl:ml-auto items-center hover:opacity-75"

diff --git a/packages/nextra-theme-docs/src/components/sidebar.tsx b/packages/nextra-theme-docs/src/components/sidebar.tsx
@@ -312,8 +312,12 @@ export function Sidebar({
         className={cn(
           'nextra-sidebar-container nextra-scrollbar fixed top-16 z-[15] h-[calc(100vh-4rem)] w-full flex-shrink-0 self-start overflow-y-auto md:sticky md:w-64',
           asPopover ? 'md:hidden' : 'md:block',
-          hasMenu && 'with-menu',
-          { open: menu }
+          '[&::-webkit-scrollbar-track]:mt-[var(--nextra-navbar-height)] md:[&::-webkit-scrollbar-track]:mt-5',
+          {
+            open: menu,
+            '[&::-webkit-scrollbar-track]:mb-[var(--nextra-menu-height)]':
+              hasMenu
+          }
         )}
         ref={containerRef}
       >
@@ -355,26 +359,26 @@ export function Sidebar({
             <div
               className={cn(
                 'sticky bottom-0 mx-4 border-t shadow-[0_-12px_16px_#fff] dark:border-neutral-800 dark:shadow-[0_-12px_16px_#111]',
-                'contrast-more:shadow-none contrast-more:dark:shadow-none contrast-more:border-neutral-400'
+                'contrast-more:shadow-none contrast-more:dark:shadow-none contrast-more:border-neutral-400',
+                'h-[var(--nextra-menu-height)]',
+                'flex bg-white dark:bg-dark justify-between items-center'
               )}
             >
-              <div className="flex gap-1 bg-white py-4 pb-4 dark:bg-dark justify-between">
-                {config.i18n.length > 0 && (
-                  <div className="relative flex-1">
-                    <LocaleSwitch options={config.i18n} />
-                  </div>
-                )}
-                {config.darkMode ? (
-                  <div
-                    className={cn(
-                      'relative',
-                      config.i18n.length > 0 ? '' : 'flex-1'
-                    )}
-                  >
-                    <ThemeSwitch lite={config.i18n.length > 0} />
-                  </div>
-                ) : null}
-              </div>
+              {config.i18n.length > 0 && (
+                <div className="relative flex-1">
+                  <LocaleSwitch options={config.i18n} />
+                </div>
+              )}
+              {config.darkMode ? (
+                <div
+                  className={cn(
+                    'relative',
+                    config.i18n.length > 0 ? '' : 'flex-1'
+                  )}
+                >
+                  <ThemeSwitch lite={config.i18n.length > 0} />
+                </div>
+              ) : null}
             </div>
           )}
         </div>

diff --git a/packages/nextra-theme-docs/src/mdx-components.tsx b/packages/nextra-theme-docs/src/mdx-components.tsx
@@ -14,7 +14,7 @@ import { Collapse, Anchor } from './components'
 import { IS_BROWSER } from './constants'
 import cn from 'clsx'
 import { DocsThemeConfig } from './types'
-import { Code, Pre, Td, Th, Tr } from 'nextra/components'
+import { Code, Pre, Table, Td, Th, Tr } from 'nextra/components'
 
 let observer: IntersectionObserver
 let setActiveAnchor: ReturnType<typeof useSetActiveAnchor>
@@ -258,7 +258,7 @@ export const getComponents = ({
       />
     ),
     table: (props: ComponentProps<'table'>) => (
-      <table className="mt-6 first:mt-0 p-0" {...props} />
+      <Table className="nextra-scrollbar mt-6 first:mt-0 p-0" {...props} />
     ),
     p: (props: ComponentProps<'p'>) => (
       <p className="mt-6 first:mt-0 leading-7" {...props} />

diff --git a/packages/nextra/src/components/index.ts b/packages/nextra/src/components/index.ts
@@ -3,5 +3,6 @@ export { CopyToClipboard } from './copy-to-clipboard'
 export { Code } from './code'
 export { Pre } from './pre'
 export { Td } from './td'
+export { Table } from './table'
 export { Th } from './th'
 export { Tr } from './tr'
diff --git a/packages/nextra/src/components/table.tsx b/packages/nextra/src/components/table.tsx
@@ -0,0 +1,8 @@
+import React, { ComponentProps } from 'react'
+
+export const Table = ({
+  className = '',
+  ...props
+}: ComponentProps<'table'>) => (
+  <table className={'block overflow-x-scroll ' + className} {...props} />
+)