docs: fix pagination on mobile devices (#7968)

* docs: fix pagination on mobile devices

* fix algolia link

www/packages/docs-ui/src/components/Pagination/index.tsx

@@ -4,12 +4,18 @@ import React from "react"
 import { usePagination } from "../../providers"
 import { Card } from "../Card"
 import { ChevronLeft, ChevronRight } from "@medusajs/icons"
+import clsx from "clsx"
 
 export const Pagination = () => {
   const { previousPage, nextPage } = usePagination()
 
   return (
-    <div className="flex justify-between">
+    <div
+      className={clsx(
+        "flex justify-between",
+        "flex-col sm:flex-row gap-docs_1 sm:gap-0"
+      )}
+    >
       {previousPage && (
         <Card
           title={previousPage.title}
@@ -17,7 +23,7 @@ export const Pagination = () => {
           startIcon={<ChevronLeft />}
           showLinkIcon={false}
           href={previousPage.link}
-          className="max-w-[45%] ml-0 mr-auto items-center"
+          className={clsx("ml-0 mr-auto items-center", "w-full sm:max-w-[45%]")}
         />
       )}
       {nextPage && (
@@ -27,7 +33,7 @@ export const Pagination = () => {
           endIcon={<ChevronRight />}
           showLinkIcon={false}
           href={nextPage.link}
-          className="max-w-[45%] mr-0 ml-auto items-center"
+          className={clsx("mr-0 ml-auto items-center", "w-full sm:max-w-[45%]")}
         />
       )}
     </div>