docs: fix mobile responsiveness and search styling

Improve navbar, hero, how-it-works, showcase, and summary sections
for small screens. Switch search dropdown from dark to light theme
and use attribute selectors for hashed class names.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: prc5

documentation/src/css/custom.css

@@ -1471,9 +1471,10 @@ body {
   box-shadow: none;
   border: 0;
   background: transparent !important;
+  position: relative;
 }
 
-@media (min-width: 996px) {
+@media (min-width: 997px) {
   .navbar {
     @apply backdrop-blur-sm;
     box-shadow: none;
@@ -1512,12 +1513,24 @@ body {
   .navbar__items .navbar__brand {
     margin-right: auto;
   }
+  .navbar__toggle {
+    position: absolute !important;
+    right: 16px;
+    top: 20px;
+  }
+  .navbar__items--right {
+    transform: translateX(20px);
+  }
+  body .navbar__items--right {
+    margin-right: 50px !important;
+  }
   body .navbar__items--right > div > .navbar__search-input {
     width: 140px !important;
+    padding-right: 0.5rem !important;
     @apply !px-2;
   }
-  body .navbar__items--right > div:last-child {
-    margin-right: 50px !important;
+  body [class*="searchHintContainer"] {
+    display: none !important;
   }
   .row.footer__links {
     display: grid;
@@ -1535,6 +1548,11 @@ body {
     @apply text-sm;
   }
 }
+@media (max-width: 420px) {
+  .navbar__title.text--truncate {
+    display: none !important;
+  }
+}
 /* Github icon */
 
 .github {
@@ -1808,73 +1826,85 @@ html body .navbar__search-input:focus {
 }
 
 html body .navbar__search {
-  --search-local-modal-background: #141415;
+  --search-local-modal-background: #ffffff;
   --search-local-modal-shadow:
-    0 8px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
-  --search-local-hit-background: #1e1e21;
+    0 8px 30px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.06);
+  --search-local-hit-background: #f4f4f5;
   --search-local-hit-shadow: none;
-  --search-local-hit-color: #e4e4e7;
-  --search-local-highlight-color: #60a5fa;
+  --search-local-hit-color: #3f3f46;
+  --search-local-highlight-color: #2563eb;
   --search-local-muted-color: #71717a;
-  --search-local-hit-active-color: #fff;
+  --search-local-hit-active-color: #18181b;
   --search-local-modal-width: 480px;
   --search-local-spacing: 10px;
   --search-local-hit-height: 48px;
 }
 
-html body .searchHintContainer {
+html body [class*="searchHintContainer"] {
   right: 8px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
   gap: 2px !important;
 }
 
-html body .searchHint {
-  font-size: 8px !important;
+html body [class*="searchHint"] {
+  font-size: 10px !important;
   font-weight: 500 !important;
   font-family:
     system-ui,
     -apple-system,
     sans-serif !important;
   line-height: 1 !important;
-  padding: 1px 3px !important;
-  min-width: 14px !important;
-  height: 16px !important;
+  padding: 2px 5px !important;
+  min-width: 18px !important;
+  height: 20px !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   text-align: center !important;
-  border-radius: 3px !important;
+  border-radius: 4px !important;
   color: #a1a1aa !important;
-  background: #f4f4f5 !important;
-  border: 1px solid #e4e4e7 !important;
-  box-shadow: 0 1px 0 #e4e4e7 !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
 }
 
-html body .searchBarContainer {
+html body [class*="searchBarContainer"] {
   margin-left: 12px !important;
+  position: relative;
 }
 
-html body .dropdownMenu {
+html body [class*="dropdownMenu"] {
   @apply !rounded-xl;
-  background: #141415 !important;
-  border: 1px solid rgba(255, 255, 255, 0.06) !important;
+  background: #ffffff !important;
+  border: 1px solid #e4e4e7 !important;
+  box-shadow:
+    0 4px 16px rgba(0, 0, 0, 0.08),
+    0 1px 3px rgba(0, 0, 0, 0.06) !important;
   margin-top: 6px !important;
 }
 
-html body .dropdownMenu * {
-  color: #e4e4e7 !important;
+html body [class*="dropdownMenu"] * {
+  color: #3f3f46 !important;
 }
 
-html body .dropdownMenu mark {
-  color: #60a5fa !important;
+html body [class*="dropdownMenu"] mark {
+  color: #2563eb !important;
   background: transparent !important;
+  font-weight: 600 !important;
 }
 
-html body .dropdownMenu .suggestion {
+html body [class*="dropdownMenu"] [class*="suggestion"] {
   @apply !rounded-lg;
-  background: #1e1e21 !important;
+  background: #f4f4f5 !important;
+}
+
+html body [class*="dropdownMenu"] [class*="suggestion"]:hover {
+  background: #e4e4e7 !important;
 }
 
-html body .dropdownMenu .suggestion span[class*="subtitle"] {
+html body [class*="dropdownMenu"] [class*="hitPath"],
+html body [class*="dropdownMenu"] [class*="subtitle"] {
   color: #71717a !important;
 }
 

documentation/src/routes/landing/hero/hero.tsx

@@ -46,17 +46,17 @@ export const Hero = () => {
           <p className="max-w-md text-center text-base my-7">Generate always up-to-date API documentation from your codebase. Zero maintenance, fully customizable.</p>
 
           {/* CTA Buttons */}
-          <div className="flex items-center gap-4">
-            <Link to="/docs/getting-started" className="!no-underline bg-indigo-500 hover:bg-indigo-600 text-white hover:text-white rounded-full px-9 h-12 m-1 ring-offset-2 ring-1 ring-indigo-400 flex items-center transition-colors">
+          <div className="flex flex-col sm:flex-row items-center gap-3 sm:gap-4 w-full sm:w-auto px-4 sm:px-0">
+            <Link to="/docs/getting-started" className="!no-underline bg-indigo-500 hover:bg-indigo-600 text-white hover:text-white rounded-full px-9 h-12 m-1 ring-offset-2 ring-1 ring-indigo-400 flex items-center justify-center whitespace-nowrap transition-colors w-full sm:w-auto">
               Get started
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-arrow-right ml-1 size-4" aria-hidden="true">
                 <path d="M5 12h14" />
                 <path d="m12 5 7 7-7 7" />
               </svg>
             </Link>
-            <Link to="/docs/showcase" className="!no-underline flex items-center gap-2 border border-slate-400 hover:bg-indigo-50 transition rounded-full px-7 h-12 text-slate-700 hover:text-slate-700">
+            <Link to="/docs/showcase" className="!no-underline flex items-center justify-center gap-2 border border-slate-400 hover:bg-indigo-50 transition rounded-full px-7 h-12 text-slate-700 hover:text-slate-700 whitespace-nowrap w-full sm:w-auto">
               <Eye className="size-5" strokeWidth={1.5} aria-hidden="true" />
-              <span className="">Showcase demo</span>
+              <span>Showcase demo</span>
             </Link>
           </div>
         </div>

documentation/src/routes/landing/how-it-works/how-it-works.tsx

@@ -245,7 +245,7 @@ const StepCard = ({ step, index }: { step: Step; index: number }) => {
   }, []);
 
   return (
-    <FadeIn delay={index * 0.1} translateY={30} className="h-full">
+    <FadeIn delay={index * 0.1} translateY={30} className="h-full min-w-0">
       <div
         ref={ref}
         className={`
@@ -254,7 +254,7 @@ const StepCard = ({ step, index }: { step: Step; index: number }) => {
           ${step.hoverBorder}
         `}
       >
-        <div className="p-6 md:p-8 flex flex-col flex-1">
+        <div className="p-6 md:p-8 flex flex-col flex-1 min-w-0">
           {/* Step number + icon */}
           <div className="flex items-center gap-3 mb-5">
             <div className={`flex items-center justify-center w-10 h-10 rounded-xl ${step.accentBg} ${step.accentBorder} border`}>
@@ -273,7 +273,7 @@ const StepCard = ({ step, index }: { step: Step; index: number }) => {
           <div
             className={`
               rounded-xl bg-slate-900 p-4 font-mono text-[12px] leading-relaxed [&_div]:text-[12px] [&_span]:text-[12px]
-              transition-all duration-500 overflow-hidden flex-1 whitespace-pre
+              transition-all duration-500 overflow-x-auto overflow-y-hidden flex-1 whitespace-pre
               ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2"}
             `}
           >

documentation/src/routes/landing/showcase/showcase.tsx

@@ -441,7 +441,7 @@ export const Showcase = () => {
                 <div className="w-2.5 h-2.5 rounded-full bg-slate-300" />
               </div>
               <div className="flex-1 flex justify-center">
-                <div className="flex items-center gap-6 text-xs text-slate-400">
+                <div className="hidden md:flex items-center gap-6 text-xs text-slate-400">
                   <span className="font-medium text-slate-600">Source</span>
                   <span className="w-px h-3 bg-slate-200" />
                   <span className="font-medium text-slate-600">Preview</span>
@@ -453,7 +453,7 @@ export const Showcase = () => {
             {/* Content split */}
             <div className="grid md:grid-cols-2 min-h-[380px]">
               {/* Left: Code editor */}
-              <div className="relative border-r border-slate-100 p-6 md:p-8 bg-white">
+              <div className="relative border-r border-slate-100 p-6 md:p-8 bg-white overflow-hidden">
                 <div className="space-y-0.5">
                   {currentStep.code.map((line, index) => (
                     <CodeLineRenderer

documentation/src/routes/landing/summary/summary.tsx

@@ -146,12 +146,12 @@ export const Summary = () => {
                           </div>
                         </div>
                         <div className="relative w-full md:w-1/2 overflow-hidden p-6 md:p-8">
-                          <div className="bg-slate-900 rounded-xl p-5 text-xs font-mono text-slate-300 leading-relaxed">
+                          <div className="bg-slate-900 rounded-xl p-5 text-xs font-mono text-slate-300 leading-relaxed overflow-hidden">
                             <div className="text-slate-500 text-xs">{"// your-docs/request.mdx"}</div>
                             <div className="mt-2">
                               <span className="text-blue-400 text-xs">## Methods</span>
                             </div>
-                            <div className="mt-1 text-xs whitespace-nowrap">
+                            <div className="mt-1 text-xs whitespace-nowrap overflow-hidden text-ellipsis">
                               <span className="text-pink-400 text-xs">{"(@import core Request "}</span>
                               <span className="text-pink-500 text-xs">{"type=methods&display=table)"}</span>
                             </div>

documentation/src/theme/TOC/index.tsx

@@ -60,7 +60,7 @@ export default function TOC({ className, ...props }: Props): JSX.Element {
           <span>Sponsor</span>
         </a>
 
-        <h6 className="text-[16px] font-bold uppercase ml-[4px]">On this page</h6>
+        <h6 className="text-[12px] font-bold uppercase ml-[4px]">On this page</h6>
         <div
           className={clsx(
             styles.tableOfContents,