Improve mobile responsiveness and fix layout issues

- Fix mobile footer positioning with proper sticky behavior and smooth transitions
- Add horizontal scrolling for wide code blocks to prevent page overflow on small screens
- Default code blocks without language specification to 'text' for consistent rendering
- Fix mobile layout for profile section headers to stack vertically on small screens
- Add overflow handling to docs prose content for better mobile experience

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>

Author: brandonkachen

web/src/app/docs/[category]/page.tsx

@@ -69,7 +69,7 @@ interface CategoryPageProps {
 
 const DocPage = ({ doc }: { doc: Doc }) => {
   return (
-    <article className="prose dark:prose-invert prose-compact [&_h1]:scroll-mt-24 [&_h2]:scroll-mt-24 [&_h3]:scroll-mt-24">
+    <article className="prose dark:prose-invert prose-compact [&_h1]:scroll-mt-24 [&_h2]:scroll-mt-24 [&_h3]:scroll-mt-24 max-w-none overflow-x-auto">
       <Mdx code={doc.body.code} />
 
       {React.createElement(

web/src/app/docs/layout.tsx

@@ -17,8 +17,25 @@ export default function DocsLayout({
   const [open, setOpen] = useState(false)
   const [showTopFade, setShowTopFade] = useState(false)
   const [showBottomFade, setShowBottomFade] = useState(false)
+  const [isFixed, setIsFixed] = useState(false)
   const sidebarRef = useRef<HTMLDivElement>(null)
 
+  // Track scroll position to determine if sidebar should be fixed
+  useEffect(() => {
+    const handleScroll = () => {
+      // The header with logo is 4rem (64px) tall
+      // Fix the sidebar when the user scrolls past the header
+      if (window.scrollY > 64) {
+        setIsFixed(true)
+      } else {
+        setIsFixed(false)
+      }
+    }
+
+    window.addEventListener('scroll', handleScroll)
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
   // New: Smoothly scroll to hash target on back/forward navigation
   useEffect(() => {
     const handleHashChange = () => {
@@ -60,7 +77,11 @@ export default function DocsLayout({
     <div className="pt-8">
       <div className="container flex md:space-x-8 overflow-x-hidden">
         <div className="hidden lg:block w-64 shrink-0">
-          <div className="fixed top-24 w-64 h-[calc(100vh-12rem)] z-40">
+          <div
+            className={`w-64 z-40 transition-all duration-200 ease-in-out ${
+              isFixed ? 'fixed top-16 h-[calc(100vh-4rem)]' : 'relative'
+            }`}
+          >
             {/* Dynamic gradient fade indicators */}
             {showTopFade && (
               <div className="absolute top-0 left-0 right-0 h-6 bg-gradient-to-b from-background to-transparent pointer-events-none z-10 rounded-t-lg transition-opacity duration-200" />

web/src/app/profile/components/profile-section.tsx

@@ -23,17 +23,21 @@ export function ProfileSection({
     <>
       {(title || description || headerActions) && (
         <div className="mb-6">
-          <div className="flex items-start justify-between">
+          <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
             <div className="space-y-1">
               {title && (
-                <h2 className="text-2xl font-semibold tracking-tight">{title}</h2>
+                <h2 className="text-2xl font-semibold tracking-tight">
+                  {title}
+                </h2>
               )}
               {description && (
                 <p className="text-muted-foreground">{description}</p>
               )}
             </div>
             {headerActions && (
-              <div className="flex items-center gap-2">{headerActions}</div>
+              <div className="flex items-center gap-2 md:ml-4">
+                {headerActions}
+              </div>
             )}
           </div>
         </div>
@@ -57,9 +61,5 @@ export function ProfileSection({
     )
   }
 
-  return (
-    <div className={cn('space-y-6', className)}>
-      {content}
-    </div>
-  )
-}
+  return <div className={cn('space-y-6', className)}>{content}</div>
+}

web/src/app/profile/page.tsx

@@ -119,7 +119,7 @@ export default function ProfilePage() {
             </div>
           </div>
         </div>
-        <main className="flex-1 min-w-0">
+        <main className="flex-1 min-w-0 pb-20 lg:pb-0">
           <div className="mb-6">
             <h1 className="text-2xl font-semibold">{activeTitle}</h1>
           </div>
@@ -128,7 +128,7 @@ export default function ProfilePage() {
       </div>
 
       {/* Mobile navigation */}
-      <div className="flex items-center lg:hidden sticky bottom-0 z-50 bg-background/80 backdrop-blur-sm container p-4 rounded-t-lg border-t">
+      <div className="flex items-center lg:hidden fixed bottom-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-sm container p-4 rounded-t-lg border-t transition-all duration-300 ease-in-out transform translate-y-0">
         <Sheet
           open={open}
           onOpenChange={(isOpen) => {

web/src/components/docs/mdx/code-demo.tsx

@@ -84,8 +84,8 @@ export function CodeDemo({ children, language, rawContent }: CodeDemoProps) {
   }
 
   return (
-    <div className="rounded-lg border bg-muted/30 px-4 w-full max-w-80 md:max-w-full my-3 transition-all group hover:bg-muted/40 overflow-hidden">
-      <div className="flex items-center justify-between h-6 mt-0.5 mb-0.5">
+    <div className="rounded-lg border bg-muted/30 w-full max-w-80 md:max-w-full my-3 transition-all group hover:bg-muted/40 overflow-x-auto">
+      <div className="flex items-center justify-between h-6 mt-0.5 mb-0.5 px-4">
         <div className="text-[10px] text-muted-foreground/40 font-mono tracking-wide">
           {language.toLowerCase()}
         </div>
@@ -101,10 +101,12 @@ export function CodeDemo({ children, language, rawContent }: CodeDemoProps) {
           )}
         </button>
       </div>
-      {language && <Separator className="bg-border/20 mb-0.5" />}
-      <pre className="text-[13px] leading-relaxed py-1 bg-transparent text-foreground/90 rounded-lg overflow-x-auto scrollbar-thin scrollbar-thumb-muted-foreground/10 scrollbar-track-transparent">
-        <code className="font-mono">{childrenContent}</code>
-      </pre>
+      {language && <Separator className="bg-border/20 mb-0.5 mx-4" />}
+      <div className="px-4">
+        <pre className="text-[13px] leading-relaxed py-1 bg-transparent text-foreground/90 rounded-lg scrollbar-thin scrollbar-thumb-muted-foreground/10 scrollbar-track-transparent">
+          <code className="font-mono">{childrenContent}</code>
+        </pre>
+      </div>
     </div>
   )
 }

web/src/components/footer.tsx

@@ -8,10 +8,41 @@ import { LinkedInInsightTag } from 'nextjs-linkedin-insight-tag'
 import { Separator } from '@/components/ui/separator'
 import { siteConfig } from '@/lib/constant'
 
+type LinkInfo = { text: string; href: string; target?: string }
+
+const siteLinks: LinkInfo[] = [
+  { text: 'Home', href: '/' },
+  { text: 'Docs', href: '/docs', target: '_blank' },
+  { text: 'News', href: 'https://news.codebuff.com', target: '_blank' },
+  { text: 'Pricing', href: '/pricing' },
+  { text: 'Usage', href: '/usage' },
+]
+
+const legalLinks: LinkInfo[] = [
+  { text: 'Privacy Policy', href: '/privacy-policy' },
+  { text: 'Terms of Service', href: '/terms-of-service' },
+]
+
+const communityLinks: LinkInfo[] = [
+  { text: 'Discord', href: 'https://discord.gg/mcWTGjgTj3', target: '_blank' },
+]
+
+const authLinks: LinkInfo[] = [{ text: 'Login', href: '/login' }]
+
+const publicPaths = [
+  ...authLinks,
+  ...legalLinks,
+  ...siteLinks.filter((link) => link.href !== '/docs'),
+]
+  .map((link) => link.href)
+  .filter((href) => !href.startsWith('http'))
+
 export const Footer = () => {
   const pathname = usePathname()
-  if (pathname.startsWith('/docs')) {
-    return <></>
+  const isPublicPage = publicPaths.includes(pathname)
+
+  if (!isPublicPage) {
+    return null
   }
 
   return (
@@ -36,71 +67,49 @@ export const Footer = () => {
           <div>
             <h3 className="font-semibold mb-4">Site</h3>
             <nav className="flex flex-col space-y-2">
-              <Link
-                href="/"
-                className="text-muted-foreground hover:text-primary"
-              >
-                Home
-              </Link>
-              <Link
-                href="/docs"
-                target="_blank"
-                className="text-muted-foreground hover:text-primary"
-              >
-                Docs
-              </Link>
-              <Link
-                href="https://news.codebuff.com"
-                target="_blank"
-                className="text-muted-foreground hover:text-primary"
-              >
-                News
-              </Link>
-              <Link
-                href="/pricing"
-                className="text-muted-foreground hover:text-primary"
-              >
-                Pricing
-              </Link>
-              <Link
-                href="/usage"
-                className="text-muted-foreground hover:text-primary"
-              >
-                Usage
-              </Link>
+              {siteLinks.map((link) => (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  target={link.target}
+                  className="text-muted-foreground hover:text-primary"
+                >
+                  {link.text}
+                </Link>
+              ))}
             </nav>
           </div>
 
           {/* Legal */}
           <div>
             <h3 className="font-semibold mb-4">Legal</h3>
             <nav className="flex flex-col space-y-2">
-              <Link
-                href="/privacy-policy"
-                className="text-muted-foreground hover:text-primary"
-              >
-                Privacy Policy
-              </Link>
-              <Link
-                href="/terms-of-service"
-                className="text-muted-foreground hover:text-primary"
-              >
-                Terms of Service
-              </Link>
+              {legalLinks.map((link) => (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  className="text-muted-foreground hover:text-primary"
+                >
+                  {link.text}
+                </Link>
+              ))}
             </nav>
           </div>
 
           {/* Community */}
           <div>
             <h3 className="font-semibold mb-4">Community</h3>
             <nav className="flex flex-col space-y-2">
-              <Link
-                href="https://discord.gg/mcWTGjgTj3"
-                target="_blank"
-                className="text-muted-foreground hover:text-primary"
-              >
-                Discord
-              </Link>
+              {communityLinks.map((link) => (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  target={link.target}
+                  className="text-muted-foreground hover:text-primary"
+                >
+                  {link.text}
+                </Link>
+              ))}
             </nav>
           </div>
         </div>

web/src/lib/remark-code-to-codedemo.ts

@@ -8,7 +8,7 @@ import type { Plugin } from 'unified'
  * and replaces them with an <CodeDemo language="lang">...</CodeDemo> MDX node,
  * preserving multi-line formatting.
  *
- * If no language is specified (plain ``` block), it leaves the original code block unchanged.
+ * If no language is specified (plain ``` block), it defaults to 'text' language.
  */
 export const remarkCodeToCodeDemo = function remarkCodeToCodeDemo(): Plugin<
   any[],
@@ -18,8 +18,8 @@ export const remarkCodeToCodeDemo = function remarkCodeToCodeDemo(): Plugin<
     visit(tree, 'code', (node: Code, index, parent: any) => {
       if (!parent || typeof index !== 'number') return
 
-      // Skip transformation if no language is specified
-      if (!node.lang) return
+      // Default to 'text' if no language is specified
+      const language = node.lang || 'text'
 
       // Build an MDX JSX node representing <CodeDemo language="lang" rawContent="...">...</CodeDemo>
       const codeDemoNode: any = {
@@ -29,7 +29,7 @@ export const remarkCodeToCodeDemo = function remarkCodeToCodeDemo(): Plugin<
           {
             type: 'mdxJsxAttribute',
             name: 'language',
-            value: node.lang,
+            value: language,
           },
           {
             type: 'mdxJsxAttribute',