docs: second round of polishing (#8724)

* docs: second round of polishing

* fix overflowing width

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

@@ -150,7 +150,13 @@ export const MDXComponents: MDXComponentsType = {
     ...props
   }: React.HTMLAttributes<HTMLElement>) => {
     return (
-      <li className={clsx("text-medusa-fg-subtle", className)} {...props}>
+      <li
+        className={clsx(
+          "text-medusa-fg-subtle [&:not(:last-child)]:mb-docs_0.5",
+          className
+        )}
+        {...props}
+      >
         <Text as="span">{children}</Text>
       </li>
     )

www/packages/docs-ui/src/components/MainNav/EditDate/index.tsx

@@ -18,13 +18,13 @@ export const MainNavEditDate = ({ date }: MainNavEditDateProps) => {
 
   return (
     <>
-      <span>
+      <span className="text-compact-small">
         Edited {dateMatch.groups.month} {dateObj.getDate()}
         {dateObj.getFullYear() !== today.getFullYear()
           ? `, ${dateObj.getFullYear()}`
           : ""}
       </span>
-      <span className="text-compact-small-plus">&#183;</span>
+      <span className="text-compact-small">&#183;</span>
     </>
   )
 }

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

@@ -13,7 +13,7 @@ export const MobileNavigation = () => {
     <div
       className={clsx(
         "sm:hidden bg-medusa-bg-base",
-        "sticky top-0 w-full z-50 h-min",
+        "sticky top-0 w-full z-40 h-min",
         "px-docs_0.75 py-docs_0.5",
         "flex justify-between items-center",
         "border-b border-medusa-border-base"

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

@@ -66,7 +66,7 @@ export const Sidebar = ({
         <div
           className={clsx(
             "lg:hidden bg-medusa-bg-overlay opacity-70",
-            "fixed top-0 left-0 w-full h-full z-10"
+            "fixed top-0 left-0 w-full h-full z-[45]"
           )}
         ></div>
       )}
@@ -76,6 +76,7 @@ export const Sidebar = ({
           "fixed -left-full top-0 h-[calc(100%-16px)] transition-[left] lg:relative lg:h-auto",
           "max-w-sidebar-xs sm:max-w-sidebar-sm md:max-w-sidebar-md lg:max-w-sidebar-lg",
           "xl:max-w-sidebar-xl xxl:max-w-sidebar-xxl xxxl:max-w-sidebar-xxxl",
+          "w-sidebar-xs sm:w-auto",
           mobileSidebarOpen && [
             "!left-docs_0.5 !top-docs_0.5 z-50 shadow-elevation-modal dark:shadow-elevation-modal-dark",
             "rounded",

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

@@ -1,10 +1,11 @@
 "use client"
 
-import React from "react"
+import React, { useMemo } from "react"
 import { Tabs as UiTabs } from "@medusajs/ui"
 import { ComponentProps } from "react"
 import clsx from "clsx"
 import { EllipseMiniSolid } from "@medusajs/icons"
+import { useMobile } from "../.."
 
 type TabsProps = ComponentProps<typeof UiTabs> & {
   layoutType?: "horizontal" | "vertical"
@@ -14,20 +15,28 @@ export const Tabs = ({
   layoutType = "horizontal",
   className,
   ...props
-}: TabsProps) => (
-  <UiTabs
-    {...props}
-    className={clsx(
-      className,
-      layoutType === "vertical" && [
-        "flex gap-docs_1",
-        "[&_[role=tablist]]:flex-col [&_[role=tablist]]:items-start",
-        "[&_[role=tablist]+*]:flex-1 [&_[role=tablist]+*]:!mt-0",
-        "[&_[role=tablist]+*]:w-3/4 [&_[role=tablist]]:w-1/4",
-      ]
-    )}
-  />
-)
+}: TabsProps) => {
+  const { isMobile } = useMobile()
+
+  const layout = useMemo(() => {
+    return isMobile ? "horizontal" : layoutType
+  }, [layoutType, isMobile])
+
+  return (
+    <UiTabs
+      {...props}
+      className={clsx(
+        className,
+        layout === "vertical" && [
+          "flex gap-docs_1",
+          "[&_[role=tablist]]:flex-col [&_[role=tablist]]:items-start",
+          "[&_[role=tablist]+*]:flex-1 [&_[role=tablist]+*]:!mt-0",
+          "[&_[role=tablist]+*]:w-3/4 [&_[role=tablist]]:w-1/4",
+        ]
+      )}
+    />
+  )
+}
 
 export const TabsList = ({
   className,
@@ -54,20 +63,32 @@ export const TabsTriggerVertical = ({
   className,
   children,
   ...props
-}: ComponentProps<typeof UiTabs.Trigger>) => (
-  <UiTabs.Trigger
-    {...props}
-    className={clsx(
-      className,
-      "px-docs_0.5 py-docs_0.25 !text-medusa-fg-base text-compact-small data-[state=active]:!text-compact-small-plus",
-      "[&[data-state=active]_svg]:!visible hover:!bg-medusa-bg-base-hover rounded-docs_DEFAULT",
-      "!shadow-none"
-    )}
-  >
-    <EllipseMiniSolid className="invisible" />
-    {children}
-  </UiTabs.Trigger>
-)
+}: ComponentProps<typeof UiTabs.Trigger>) => {
+  const { isMobile } = useMobile()
+
+  if (isMobile) {
+    return (
+      <TabsTrigger className={className} {...props}>
+        {children}
+      </TabsTrigger>
+    )
+  }
+
+  return (
+    <UiTabs.Trigger
+      {...props}
+      className={clsx(
+        className,
+        "px-docs_0.5 py-docs_0.25 !text-medusa-fg-base text-compact-small data-[state=active]:!text-compact-small-plus",
+        "[&[data-state=active]_svg]:!visible hover:!bg-medusa-bg-base-hover rounded-docs_DEFAULT",
+        "!shadow-none"
+      )}
+    >
+      <EllipseMiniSolid className="invisible" />
+      {children}
+    </UiTabs.Trigger>
+  )
+}
 
 type TabsContentWrapperProps = {
   className?: string