docs: fix infinite scroll, update next.js, other fixes (#9441)

* update nextjs

* badge + scroll fixes

www/apps/user-guide/app/globals.css

@@ -2,32 +2,29 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
+@layer base {
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+  html {
+    -webkit-font-smoothing: antialiased;
   }
-}
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
+  body {
+    @apply overflow-x-hidden;
   }
-}
+
+  *::selection {
+    @apply bg-medusa-bg-highlight;
+  }
+
+  * {
+    scrollbar-color: var(--docs-border-base) var(--docs-bg-base);
+  }
+
+  aside * {
+    scrollbar-color: var(--docs-border-base) var(--docs-bg-subtle);
+  }
+
+  body[data-modal="opened"] {
+    @apply !overflow-hidden;
+  }
+}

www/apps/user-guide/package.json

@@ -17,10 +17,10 @@
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
     "@medusajs/icons": "preview",
-    "@next/mdx": "^14.2.3",
+    "@next/mdx": "^14.2.14",
     "clsx": "^2.1.0",
     "docs-ui": "*",
-    "next": "14.2.3",
+    "next": "14.2.14",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rehype-mdx-code-props": "^2.0.0",