break words in navlinks, remove unneeded <div /> wrappers, align te…

…xt on right side for next link (#750)
shuding · Aug 29, 2022 · 5d852b6 · 5d852b6
1 parent 1ee3c92
commit 5d852b6
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 34 deletions.
diff --git a/.changeset/odd-moose-kick.md b/.changeset/odd-moose-kick.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+break words in navlinks, remove unneeded `<div />` wrappers, align text on right side for next link
diff --git a/packages/nextra-theme-docs/src/components/callout.tsx b/packages/nextra-theme-docs/src/components/callout.tsx
@@ -39,9 +39,7 @@ export function Callout({
       >
         {emoji}
       </div>
-      <span className="w-[calc(100%-2.5rem)]">
-        {children}
-      </span>
+      <div className="min-w-0">{children}</div>
     </div>
   )
 }
diff --git a/packages/nextra-theme-docs/src/components/nav-links.tsx b/packages/nextra-theme-docs/src/components/nav-links.tsx
@@ -10,6 +10,11 @@ interface NavLinkProps {
   flatDirectories: Item[]
 }
 
+const classes = {
+  link: 'max-w-[50%] gap-1 [word-break:break-word] flex items-center rounded py-4 text-base font-medium text-gray-600 transition-colors hover:text-primary-500 dark:text-gray-300 md:text-lg',
+  icon: 'h-5 inline flex-shrink-0'
+}
+
 export const NavLinks = ({
   flatDirectories,
   currentIndex
@@ -21,37 +26,30 @@ export const NavLinks = ({
   if (!prev && !next) return null
 
   return (
-    <div className="nextra-navigation-links mb-8 flex flex-row items-center justify-between border-t pt-8 dark:border-neutral-800">
-      <div className="flex min-w-0 flex-1 justify-start">
-        {prev ? (
-          <Anchor
-            href={prev.route}
-            title={prev.title}
-            className={cn(
-              '-m-4 flex items-center rounded p-4 text-base font-medium text-gray-600 transition-colors hover:text-primary-500 dark:text-gray-300 md:text-lg',
-              'rtl:ml-2 ltr:mr-2'
-            )}
-          >
-            <ArrowRightIcon className="h-5 inline flex-shrink-0 transform rtl:ml-1 ltr:mr-1 ltr:rotate-180" />
-            {prev.title}
-          </Anchor>
-        ) : null}
-      </div>
-      <div className="flex min-w-0 flex-1 justify-end">
-        {next ? (
-          <Anchor
-            href={next.route}
-            title={next.title}
-            className={cn(
-              '-m-4 inline-flex items-center justify-end rounded p-4 text-base font-medium text-gray-600 transition-colors hover:text-primary-500 dark:text-gray-300 md:text-lg',
-              'rtl:mr-2 ltr:ml-2'
-            )}
-          >
-            {next.title}
-            <ArrowRightIcon className="h-5 inline flex-shrink-0 transform rtl:mr-1 rtl:rotate-180 ltr:ml-1" />
-          </Anchor>
-        ) : null}
-      </div>
+    <div className="nextra-navigation-links mb-8 flex items-center border-t pt-8 dark:border-neutral-800">
+      {prev && (
+        <Anchor
+          href={prev.route}
+          title={prev.title}
+          className={cn(classes.link, 'ltr:pr-4 rtl:pl-4')}
+        >
+          <ArrowRightIcon className={cn(classes.icon, 'ltr:rotate-180')} />
+          {prev.title}
+        </Anchor>
+      )}
+      {next && (
+        <Anchor
+          href={next.route}
+          title={next.title}
+          className={cn(
+            classes.link,
+            'ltr:pl-4 rtl:pr-4 ltr:text-right rtl:text-left ltr:ml-auto rtl:mr-auto'
+          )}
+        >
+          {next.title}
+          <ArrowRightIcon className={cn(classes.icon, 'rtl:rotate-180')} />
+        </Anchor>
+      )}
     </div>
   )
 }