fix: secondary navbar overflow (#9891)

EddieHubCommunity · Dec 25, 2023 · 0dbdebf · 0dbdebf
1 parent aeb4e4b
commit 0dbdebf
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/components/Tabs.js b/components/Tabs.js
@@ -4,7 +4,7 @@ import { classNames } from "@services/utils/classNames";
 export default function Tabs({ tabs, setTabs, selectedTab }) {
   return (
     <div>
-      <div className="sm:hidden">
+      <div className="tablet:hidden">
         {tabs.length > 1 && (
           <Select
             name="tabs"
@@ -17,7 +17,7 @@ export default function Tabs({ tabs, setTabs, selectedTab }) {
           />
         )}
       </div>
-      <div className="hidden sm:block mb-4">
+      <div className="hidden tablet:block mb-4">
         <div className="border-b border-primary-medium-low">
           <nav className="-mb-px flex" aria-label="Tabs">
             {tabs.map((tab) => (

diff --git a/components/navbar/Navbar.js b/components/navbar/Navbar.js
@@ -154,7 +154,7 @@ export default function Navbar() {
                   <LogoWide onClick={() => setIsOpen(false)} width={128} />
                 </Link>
               </div>
-              <div className="hidden md:block">
+              <div className="hidden tablet:block">
                 <ul className="ml-10 flex items-baseline space-x-4">
                   {primary.map((item) => (
                     <li key={item.name}>
@@ -168,7 +168,7 @@ export default function Navbar() {
                 </ul>
               </div>
             </div>
-            <div className="hidden md:block">
+            <div className="hidden tablet:block">
               <div className="flex items-center gap-3">
                 {renderThemeChanger()}
                 <Link
@@ -187,7 +187,7 @@ export default function Navbar() {
                 {authControls()}
               </div>
             </div>
-            <div className="-mr-2 flex md:hidden">
+            <div className="-mr-2 flex tablet:hidden">
               <button
                 onClick={() => setIsOpen(isOpen ? false : true)}
                 type="button"

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -35,6 +35,9 @@ module.exports = {
           high: "#770d14",
         },
       },
+      screens: {
+        'tablet': '900px',
+      },
     },
   },
   corePlugins: {