From de0a9c14abd910715fd33ef09690f32eba51612e Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Fri, 5 Jul 2024 13:40:42 +0300
Subject: [PATCH] docs: fix pagination on mobile devices (#7968)

* docs: fix pagination on mobile devices

* fix algolia link
---
 www/apps/api-reference/vercel.json                   |  2 +-
 .../docs-ui/src/components/Pagination/index.tsx      | 12 +++++++++---
 www/packages/docs-ui/src/layouts/tight.tsx           |  3 ++-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/www/apps/api-reference/vercel.json b/www/apps/api-reference/vercel.json
index 4f46f0d971..b0923b0acd 100644
--- a/www/apps/api-reference/vercel.json
+++ b/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",
diff --git a/www/packages/docs-ui/src/components/Pagination/index.tsx b/www/packages/docs-ui/src/components/Pagination/index.tsx
index 26d99d90c9..c8338619e4 100644
--- a/www/packages/docs-ui/src/components/Pagination/index.tsx
+++ b/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>
diff --git a/www/packages/docs-ui/src/layouts/tight.tsx b/www/packages/docs-ui/src/layouts/tight.tsx
index 29bfb41da4..166a643d48 100644
--- a/www/packages/docs-ui/src/layouts/tight.tsx
+++ b/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">