fix: Breadcrumbs should not wrap (#599)

* fix breadcrumb wrapping * add changeset
shuding · Jul 27, 2022 · c8bb94f · c8bb94f
1 parent 3e3b0a9
commit c8bb94f
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/.changeset/two-actors-beam.md b/.changeset/two-actors-beam.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+UI adjustments
diff --git a/package.json b/package.json
@@ -6,8 +6,8 @@
     "types": "turbo run types",
     "types:check": "turbo run types:check",
     "dev:core": "turbo run dev --filter=\"nextra\"",
-    "dev:theme-blog": "turbo run dev --filter=\"blog\" --include-dependencies",
-    "dev:theme-docs": "turbo run dev --filter=\"swr-site\" --include-dependencies",
+    "dev:theme-blog": "turbo run dev --filter=\"blog\" --filter=\"nextra\" --filter=\"nextra-theme-blog\"",
+    "dev:theme-docs": "turbo run dev --filter=\"swr-site\" --filter=\"nextra\" --filter=\"nextra-theme-docs\"",
     "build:core": "pnpm run build --filter=\"nextra\"",
     "build:theme-blog": "pnpm run build --filter=\"nextra-theme-blog\"",
     "build:theme-docs": "pnpm run build --filter=\"nextra-theme-docs\"",

diff --git a/packages/nextra-theme-docs/src/breadcrumb.tsx b/packages/nextra-theme-docs/src/breadcrumb.tsx
@@ -20,13 +20,13 @@ export default function Breadcrumb({ activePath }: { activePath: Item[] }) {
             ) : null}
             <div
               className={cn(
-                'transition-colors hover:text-gray-900 dark:hover:text-gray-200',
+                'transition-colors hover:text-gray-900 dark:hover:text-gray-200 whitespace-nowrap',
                 {
                   'active text-gray-600 dark:text-gray-400': isActive,
-                  'min-w-[24px] overflow-hidden text-ellipsis whitespace-nowrap':
-                    !isActive
+                  'min-w-[24px] overflow-hidden text-ellipsis': !isActive
                 }
               )}
+              title={item.title}
             >
               {isLink && !isActive ? (
                 <Link href={item.route}>

diff --git a/packages/nextra-theme-docs/src/navbar.tsx b/packages/nextra-theme-docs/src/navbar.tsx
@@ -166,7 +166,7 @@ export default function Navbar({ flatDirectories, items }: NavBarProps) {
           ) : null}
 
           <button
-            className="nextra-menu-icon block p-2 md:hidden"
+            className="nextra-menu-icon block p-2 -mr-2 md:hidden"
             onClick={() => setMenu(!menu)}
           >
             <MenuIcon className={cn({ open: menu })} />