fix scrollbar for table and tabs (#1401)

* fix scrollbar for table and tabs * update snapsh0ts
shuding · Jan 26, 2023 · 086cf7b · 086cf7b · vercel · Jan 26, 2023
1 parent bcaba9c
commit 086cf7b
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 2 deletions.
diff --git a/.changeset/wet-balloons-play.md b/.changeset/wet-balloons-play.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+fix scrollbar for table and tabs
diff --git a/examples/swr-site/pages/docs/advanced/scrollbar-x.en-US.mdx b/examples/swr-site/pages/docs/advanced/scrollbar-x.en-US.mdx
@@ -0,0 +1,21 @@
+import { Tabs, Tab } from 'nextra-theme-docs'
+
+|**Student ID**|**First Name**|**Last Name**|**Major**|**GPA**|**Graduation Year**|**Email**|**Phone Number**|**Address**|**Date of Birth**|**Gender**|**Class Standing**|**Enrollment Status**|**Enrollment Date**|**Graduation Date**|**Advisor ID**|
+|:----|:----|:----|:----|:----|:----|:----|:----|:----|:----|:----|:----|:----|:----|:----|:----|
+|    12345|John|Doe|Computer Science|3.5|2024|[email protected]|555-555-5555|123 Main St, Anytown USA|01/01/2000|M|Junior|Full-time|01/01/2022|05/01/2024|54321|
+|    67890|Jane|Smith|Biology|3.2|2023|[email protected]|555-555-5555|456 Park Ave, Anytown USA|02/02/1999|F|Senior|Full-time|01/01/2019|12/01/2022|56789|
+|    11111|Bob|Johnson|Mathematics|3.7|2022|[email protected]|555-555-5555|789 Elm St, Anytown USA|03/03/1998|M|Senior|Part-time|01/01/2021|05/01/2022|98765|
+|    22222|Samantha|Williams|Chemistry|3.3|2024|[email protected]|555-555-5555|321 Oak St, Anytown USA|04/04/1997|F|Junior|Full-time|01/01/2022|05/01/2024|54321|
+|    33333|Michael|Brown|Political Science|3.0|2023|[email protected]|555-555-5555|159 Pine St, Anytown USA|05/05/1996|M|Senior|Full-time|01/01/2019|12/01/2022|56789|
+|    44444|Ashley|Moore|Business|3.5|2022|[email protected]|555-555-5555|753 Birch St, Anytown USA|06/06/1995|F|Senior|Part-time|01/01/2021|05/01/2022|98765|
+|    55555|David|Taylor|Engineering|3.9|2024|[email protected]|555-555-5555|964 Maple St, Anytown USA|07/07/1994|M|Junior|Full-time|01/01/2022|05/01/2024|54321|
+|    77777|Jessica|Anderson|Communications|3.6|2023|[email protected]|555-555-5555|111 Cedar St, Anytown USA|08/08/1993|F|Senior|Full-time|01/01/2019|12/01/2022|56789|
+
+<Tabs items={['name', 'version', 'private','dependencies','scripts','eslintConfig','browserslist','development' ,'name', 'version', 'private']}>
+  <Tab className='bg-red-500'>
+    dada
+  </Tab>
+  <Tab>
+    dadasd
+  </Tab>
+</Tabs>
diff --git a/packages/nextra-theme-docs/css/scrollbar.css b/packages/nextra-theme-docs/css/scrollbar.css
@@ -4,7 +4,7 @@
 
   scrollbar-gutter: stable;
   &::-webkit-scrollbar {
-    @apply nx-w-3 nx-h-1.5;
+    @apply nx-w-3 nx-h-3;
   }
   &::-webkit-scrollbar-track {
     @apply nx-bg-transparent;

diff --git a/packages/nextra-theme-docs/src/components/tabs.tsx b/packages/nextra-theme-docs/src/components/tabs.tsx
@@ -38,7 +38,7 @@ export function Tabs({
       defaultIndex={defaultIndex}
       onChange={onChange}
     >
-      <div className="no-scrollbar -nx-m-2 nx-overflow-x-auto nx-overflow-y-hidden nx-overscroll-x-contain nx-p-2">
+      <div className="nextra-scrollbar nx-overflow-x-auto nx-overflow-y-hidden nx-overscroll-x-contain">
         <HeadlessTab.List className="nx-mt-4 nx-flex nx-w-max nx-min-w-full nx-border-b nx-border-gray-200 nx-pb-px dark:nx-border-neutral-800">
           {items.map((item, index) => {
             const disabled = !!(

diff --git a/packages/nextra/__test__/__snapshots__/context.test.ts.snap b/packages/nextra/__test__/__snapshots__/context.test.ts.snap
@@ -498,6 +498,12 @@ exports[`context > getAllPages() > should work 1`] = `
             "name": "react-native",
             "route": "/docs/advanced/react-native",
           },
+          {
+            "kind": "MdxPage",
+            "locale": "en-US",
+            "name": "scrollbar-x",
+            "route": "/docs/advanced/scrollbar-x",
+          },
         ],
         "kind": "Folder",
         "name": "advanced",
@@ -1412,6 +1418,12 @@ exports[`context > getCurrentLevelPages() > should work 1`] = `
         "name": "react-native",
         "route": "/docs/advanced/react-native",
       },
+      {
+        "kind": "MdxPage",
+        "locale": "en-US",
+        "name": "scrollbar-x",
+        "route": "/docs/advanced/scrollbar-x",
+      },
     ],
     "kind": "Folder",
     "name": "advanced",
@@ -1672,5 +1684,11 @@ exports[`context > getPagesUnderRoute() > should work 1`] = `
     "name": "react-native",
     "route": "/docs/advanced/react-native",
   },
+  {
+    "kind": "MdxPage",
+    "locale": "en-US",
+    "name": "scrollbar-x",
+    "route": "/docs/advanced/scrollbar-x",
+  },
 ]
 `;
diff --git a/packages/nextra/__test__/__snapshots__/page-map.test.ts.snap b/packages/nextra/__test__/__snapshots__/page-map.test.ts.snap
@@ -384,6 +384,12 @@ exports[`Page Process > pageMap en-US 1`] = `
               "name": "react-native",
               "route": "/docs/advanced/react-native",
             },
+            {
+              "kind": "MdxPage",
+              "locale": "en-US",
+              "name": "scrollbar-x",
+              "route": "/docs/advanced/scrollbar-x",
+            },
           ],
           "kind": "Folder",
           "name": "advanced",
@@ -901,6 +907,12 @@ exports[`Page Process > pageMap ru 1`] = `
               "name": "markdown-import",
               "route": "/docs/advanced/markdown-import",
             },
+            {
+              "kind": "MdxPage",
+              "locale": "en-US",
+              "name": "scrollbar-x",
+              "route": "/docs/advanced/scrollbar-x",
+            },
           ],
           "kind": "Folder",
           "name": "advanced",