docs: fix pagination on mobile devices (#7968)

* docs: fix pagination on mobile devices

* fix algolia link

www/apps/api-reference/vercel.json

@@ -1,6 +1,6 @@
 {
   "crons": [{
-    "path": "/v2/api/algolia",
+    "path": "/v2/api/api/algolia",
     "schedule": "0 0 * * 4"
   }],
   "framework": "nextjs",

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>

www/packages/docs-ui/src/layouts/tight.tsx

@@ -19,7 +19,8 @@ export const TightLayout = ({
       <div
         className={clsx(
           "relative flex w-full flex-1 items-start justify-center",
-          " px-docs_1 pb-docs_2 pt-docs_7 md:px-docs_2 lg:px-docs_4 lg:py-docs_7"
+          "px-docs_1 pb-docs_2 pt-docs_7 md:px-docs_2 lg:px-docs_4 lg:py-docs_7",
+          "mb-docs_4 sm:mb-0"
         )}
       >
         <main className="h-full w-full lg:max-w-[720px] lg:px-px">