Merge pull request #291 from wpengine/chore-fix-mobile-ux-docs-page

Chore: Various UX fixes

Author: Fran-A-Dev

src/components/docs-previous-next-link.jsx

@@ -19,32 +19,35 @@ export default function DocsPreviousNextLinks({ routes }) {
 	const nextPage = routes[currentIndex + 1];
 
 	return (
-		<nav aria-label="pagination" className="mt-8 mb-4 flex justify-between">
+		<nav
+			aria-label="pagination"
+			className="mt-8 mb-4 flex justify-between space-x-2"
+		>
 			{previousPage && (
 				<Link
-					className="max-w-[200px] font-normal text-gray-400 no-underline transition duration-200 ease-in hover:text-white focus:text-white"
+					className="max-w-[50%] font-normal text-gray-400 no-underline transition duration-200 ease-in hover:text-white focus:text-white"
 					href={previousPage.route}
 					noDefaultStyles
 					aria-label={`Go to previous page: ${previousPage.title}`}
 				>
-					<span className="mb-1 ml-10 block text-sm">Previous</span>
+					<span className="mb-1 block text-sm sm:ml-10">Previous</span>
 					<span>
-						<ChevronLeftIcon className="inline h-5 w-10 pr-4 align-text-top" />
+						<ChevronLeftIcon className="hidden h-5 w-10 pr-4 align-text-top sm:inline" />
 					</span>
 					<span className="text-white">{previousPage.title}</span>
 				</Link>
 			)}
 			{nextPage && (
 				<Link
-					className="max-w-[200px] font-normal text-gray-400 no-underline transition duration-200 ease-in hover:text-white focus:text-white"
+					className="max-w-[50%] font-normal text-gray-400 no-underline transition duration-200 ease-in hover:text-white focus:text-white"
 					href={nextPage.route}
 					noDefaultStyles
 					aria-label={`Go to next page: ${nextPage.title}`}
 				>
 					<span className="mb-1 block text-sm">Next</span>
 					<span className="text-white">{nextPage.title}</span>
 					<span>
-						<ChevronRightIcon className="inline h-5 w-10 pl-4 align-text-top" />
+						<ChevronRightIcon className="hidden h-5 w-10 pl-4 align-text-top sm:inline" />
 					</span>
 				</Link>
 			)}

src/components/heading.jsx

@@ -12,7 +12,7 @@ export default function Heading({ level, children, id, ...props }) {
 		>
 			<Link
 				href={`#${id}`}
-				className="no-underline transition-colors group-hover:text-blue-500"
+				className="break-all no-underline transition-colors group-hover:text-blue-500"
 				noDefaultStyles
 			>
 				{children}