docs: second round of polishing (#8724)

* docs: second round of polishing

* fix overflowing width

www/apps/api-reference/app/globals.css

@@ -43,10 +43,6 @@
     @apply bg-medusa-bg-highlight;
   }
 
-  pre *::selection {
-    @apply !bg-medusa-contrast-bg-highlight;
-  }
-
   body[data-modal="opened"] {
     @apply !overflow-hidden;
   }

www/apps/resources/sidebar.mjs

@@ -281,7 +281,7 @@ export const sidebar = sidebarAttachHrefCommonOptions([
       },
       {
         type: "category",
-        title: "Currency",
+        title: "Currency Module",
         initialOpen: false,
         children: [
           {
@@ -348,7 +348,7 @@ export const sidebar = sidebarAttachHrefCommonOptions([
       },
       {
         type: "category",
-        title: "Customer",
+        title: "Customer Module",
         initialOpen: false,
         children: [
           {

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

www/packages/docs-ui/src/layouts/main-content.tsx

@@ -33,10 +33,10 @@ export const MainContentLayout = ({
   return (
     <div
       className={clsx(
-        "relative",
+        "relative max-w-full",
         "h-full flex-1",
         "flex flex-col",
-        "gap-docs_0.5 lg:pt-docs_0.5 lg:mr-docs_0.25",
+        "gap-docs_0.5 lg:pt-docs_0.25 lg:mr-docs_0.25",
         !desktopSidebarOpen && "lg:ml-docs_0.25",
         mainWrapperClasses
       )}

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

@@ -17,7 +17,8 @@ export const TightLayout = ({
           "w-full h-fit",
           "max-w-inner-content-xs sm:max-w-inner-content-sm md:max-w-inner-content-md",
           "lg:max-w-inner-content-lg xl:max-w-inner-content-xl xxl:max-w-inner-content-xxl",
-          "xxxl:max-w-inner-content-xxxl"
+          "xxxl:max-w-inner-content-xxxl",
+          "px-docs_1 md:px-docs_4 lg:px-0"
         )}
       >
         {children}

www/packages/tailwind/base.tailwind.config.js

@@ -282,10 +282,11 @@ module.exports = {
       },
       width: {
         toc: "221px",
+        "sidebar-xs": "calc(100% - 20px)",
       },
       maxWidth: {
         // sidebar
-        "sidebar-xs": "300px",
+        "sidebar-xs": "calc(100% - 20px)",
         "sidebar-sm": "300px",
         "sidebar-md": "300px",
         "sidebar-lg": "221px",
@@ -301,9 +302,9 @@ module.exports = {
         "main-content-xxl": "1263px",
         "main-content-xxxl": "3567px",
         // inner content
-        "inner-content-xs": "272px",
-        "inner-content-sm": "592px",
-        "inner-content-md": "640px",
+        "inner-content-xs": "100%",
+        "inner-content-sm": "100%",
+        "inner-content-md": "100%",
         "inner-content-lg": "640px",
         "inner-content-xl": "640px",
         "inner-content-xxl": "640px",