UI Fixes: Consistent styling and layouts

apps/framework-docs-v2/content/guides/chat-in-your-app.mdx

@@ -1,16 +1,17 @@
 ---
 title: Chat in Your App
 description: Build AI-powered chat experiences with real-time analytics using MooseStack
-previewVariant: "chat"
 languages: ["typescript"]
 tags: ["MCP"]
 ---
 
-import { FileTree, CTACards, CTACard, Callout, BulletPointsCard, ToggleBlock } from "@/components/mdx";
+import { FileTree, CTACards, CTACard, Callout, BulletPointsCard, ToggleBlock, GuideBadges } from "@/components/mdx";
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
 
 # Building a data-aware chat on top of your ClickHouse database with Next.js and MooseStack
 
+<GuideBadges languages={["typescript"]} tags={["MCP"]} />
+
 <Callout type="info" title="TL;DR">
 * It can be simple to set up high performance chat in your applications.   
 * That baseline delivers real value.  

apps/framework-docs-v2/content/guides/customer-data-platform.mdx

@@ -4,8 +4,12 @@ description: Build your own Customer Data Platform with MooseStack
 languages: ["typescript"]
 ---
 
+import { GuideBadges } from "@/components/mdx";
+
 # Customer Data Platform (CDP)
 
+<GuideBadges languages={["typescript"]} />
+
 This guide walks you through building a Customer Data Platform that unifies customer data from multiple sources.
 
 ## What You'll Learn

apps/framework-docs-v2/content/guides/data-warehouses.mdx

@@ -4,8 +4,12 @@ description: Build scalable data warehouses with MooseStack and ClickHouse
 languages: ["python"]
 ---
 
+import { GuideBadges } from "@/components/mdx";
+
 # Building Your First Data Warehouse
 
+<GuideBadges languages={["python"]} />
+
 ## Build a working data warehouse in one afternoon
 
 This guide gets you building immediately. You'll create a real analytics system that answers business questions in seconds instead of minutes or hours.

apps/framework-docs-v2/content/guides/performant-dashboards.mdx

@@ -1,7 +1,6 @@
 ---
 title: Improving the Performance of Your Dashboards
 description: Build fast dashboards using MooseStack and ClickHouse
-previewVariant: "dashboards"
 languages: ["typescript"]
 ---
 
@@ -15,11 +14,14 @@ import {
   CustomizeGrid,
   SelectField,
   ConditionalContent,
+  GuideBadges,
   CommunityCallout,
 } from "@/components/mdx";
 
 # Improving the Performance of Your Dashboards
 
+<GuideBadges languages={["typescript"]} />
+
 <Callout type="info" title="TL;DR">
 * Slow dashboards are usually a database architecture problem, not a frontend or charting library problem.
 * Running analytical queries on your transactional database degrades your entire application's performance and reliability.

apps/framework-docs-v2/content/guides/static-report-generation.mdx

@@ -4,11 +4,13 @@ description: Automate report generation with MooseStack workflows
 languages: ["typescript"]
 ---
 
-import { FileTree, CTACards, CTACard, Callout, BulletPointsCard, ToggleBlock } from "@/components/mdx";
+import { FileTree, CTACards, CTACard, Callout, BulletPointsCard, ToggleBlock, GuideBadges } from "@/components/mdx";
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
 
 # Static Report Generation
 
+<GuideBadges languages={["typescript"]} />
+
 <Callout type="info" title="TL;DR">
 * Static reports are pre-generated snapshots (PDF, Excel, CSV) that capture data at a specific point in time
 * They remain essential for compliance, auditability, and stakeholder workflows despite interactive dashboards

apps/framework-docs-v2/content/moosestack/contribution/documentation.mdx

@@ -328,24 +328,22 @@ Create alternating left-right layouts for showcasing features:
 - `children`: Code component (typically `CodeEditorWrapper`)
 - `language`: Language for syntax highlighting (default: `"ts"`)
 
-### IconBadge
+### Badges
 
-Small badges for highlighting features or technologies:
+Small badges for highlighting features or technologies. Use the standard shadcn Badge component:
 
 ```tsx
-import { IconBadge } from "@/components/mdx/icon-badge";
+import { Badge } from "@/components/ui/badge";
 
-<div className="flex items-center gap-4 my-8 flex-wrap">
-  <IconBadge Icon="Rocket" label="5 minute setup" variant="moose" />
-  <IconBadge Icon="Database" label="Pre-integrated ClickHouse" variant="moose" />
+<div className="flex items-center gap-2 mt-4 mb-4 flex-wrap">
+  <Badge variant="outline" className="bg-muted border-border text-muted-foreground">5 minute setup</Badge>
+  <Badge variant="outline" className="bg-muted border-border text-muted-foreground">Pre-integrated ClickHouse</Badge>
 </div>
 ```
 
 **Props:**
-- `Icon`: Lucide icon name (string) or icon component (optional)
-- `label`: Badge text (required)
-- `variant`: `"moose" | "boreal" | "sloan" | "default"` (default: `"moose"`)
-- `rounded`: `"md" | "full"` (default: `"md"`)
+- `variant`: `"default" | "secondary" | "destructive" | "outline"` (use `"outline"` for standard doc badges)
+- `className`: Additional styling (use `"bg-muted border-border text-muted-foreground"` for consistent styling)
 
 ### CodeEditorWrapper
 

apps/framework-docs-v2/content/moosestack/getting-started/from-clickhouse.mdx

@@ -5,15 +5,16 @@ order: 2
 category: getting-started
 ---
 
-import { Callout, ToggleBlock, ZoomImg, MuxVideo, BulletPointsCard, IconBadge, CTACards, CTACard, LanguageTabs, LanguageTabContent, FileTree, Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/mdx";
+import { Callout, ToggleBlock, ZoomImg, MuxVideo, BulletPointsCard, CTACards, CTACard, LanguageTabs, LanguageTabContent, FileTree, Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/mdx";
+import { Badge } from "@/components/ui/badge";
 import { PathConfig } from "@/lib/path-config";
 
 # Use Moose with Your Existing ClickHouse
 
-<div className="flex flex-wrap md:flex-nowrap gap-4 my-8">
-<IconBadge Icon="Clock" label="5 min setup" variant="moose" />
-<IconBadge Icon="Check" label="Zero disruption to prod" variant="moose" />
-<IconBadge Icon="DeviceLaptop" label="Code-first, local dev" variant="moose" />
+<div className="flex items-center gap-2 mt-4 mb-4 flex-wrap">
+  <Badge variant="outline" className="bg-muted border-border text-muted-foreground">5 min setup</Badge>
+  <Badge variant="outline" className="bg-muted border-border text-muted-foreground">Zero disruption to prod</Badge>
+  <Badge variant="outline" className="bg-muted border-border text-muted-foreground">Code-first, local dev</Badge>
 </div>
 
 ## What This Guide Does

apps/framework-docs-v2/content/moosestack/getting-started/quickstart.mdx

@@ -6,15 +6,16 @@ category: getting-started
 ---
 
 
-import { Callout, ToggleBlock, MuxVideo, BulletPointsCard, IconBadge, CTACards, CTACard, LanguageTabs, LanguageTabContent, FileTree, Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/mdx";
+import { Callout, ToggleBlock, MuxVideo, BulletPointsCard, CTACards, CTACard, LanguageTabs, LanguageTabContent, FileTree, Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/mdx";
+import { Badge } from "@/components/ui/badge";
 import { PathConfig } from "@/lib/path-config";
 
 # 5-Minute Quickstart
 
-<div className="flex items-center gap-4 my-8 flex-wrap">
-<IconBadge Icon="Clock" label="5 minute setup" variant="moose" />
-<IconBadge Icon="Check" label="Zero config" variant="moose" />
-<IconBadge Icon="DeviceLaptop" label="Local ClickHouse, Redpanda, and APIs" variant="moose" />
+<div className="flex items-center gap-2 mt-4 mb-4 flex-wrap">
+  <Badge variant="outline" className="bg-muted border-border text-muted-foreground">5 minute setup</Badge>
+  <Badge variant="outline" className="bg-muted border-border text-muted-foreground">Zero config</Badge>
+  <Badge variant="outline" className="bg-muted border-border text-muted-foreground">Local ClickHouse, Redpanda, and APIs</Badge>
 </div>
 
 <LanguageTabs>

apps/framework-docs-v2/content/moosestack/index.mdx

@@ -5,16 +5,17 @@ order: 1
 category: getting-started
 ---
 
-import { IconBadge, CTACard, CTACards, StaggeredCard, StaggeredCards, StaggeredContent, StaggeredCode, Callout, LanguageTabs, LanguageTabContent, CodeEditorWrapper } from "@/components/mdx";
+import { CTACard, CTACards, StaggeredCard, StaggeredCards, StaggeredContent, StaggeredCode, Callout, LanguageTabs, LanguageTabContent, CodeEditorWrapper } from "@/components/mdx";
+import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { PathConfig } from "@/lib/path-config";
 
 # MooseStack
 
-<div className="flex items-center gap-4 my-8 flex-wrap">
-  <IconBadge Icon="Rocket" label="5 minute setup" variant="moose" />
-  <IconBadge Icon="Database" label="Pre-integrated ClickHouse, Redpanda, Temporal" variant="moose" />
-  <IconBadge Icon="DeviceLaptop" label="Hot-reload development" variant="moose" />
+<div className="flex items-center gap-2 mt-4 mb-4 flex-wrap">
+  <Badge variant="outline" className="bg-muted border-border text-muted-foreground">5 minute setup</Badge>
+  <Badge variant="outline" className="bg-muted border-border text-muted-foreground">Pre-integrated ClickHouse, Redpanda, Temporal</Badge>
+  <Badge variant="outline" className="bg-muted border-border text-muted-foreground">Hot-reload development</Badge>
 </div>
 
 Type-safe, code-first tooling for building real-time analytical backends--OLAP Databases, Data Streaming, ETL Workflows, Query APIs, and more.
@@ -25,7 +26,7 @@ Type-safe, code-first tooling for building real-time analytical backends--OLAP D
 bash -i <(curl -fsSL https://fiveonefour.com/install.sh) moose
 ```
 
-<CTACards rows={3} columns={1}>
+<CTACards grouped>
   <CTACard
     title="5-minute Quickstart"
     description="Start with a simple demo app to get a feel for Moose"

apps/framework-docs-v2/content/moosestack/olap/model-table.mdx

@@ -5,15 +5,16 @@ order: 1
 category: olap
 ---
 
-import { Callout, BulletPointsCard, LanguageTabs, LanguageTabContent, IconBadge, CTACards, CTACard, FileTree, Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/mdx";
+import { Callout, BulletPointsCard, LanguageTabs, LanguageTabContent, CTACards, CTACard, FileTree, Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/mdx";
+import { Badge } from "@/components/ui/badge";
 import { PathConfig } from "@/lib/path-config";
 
 # Modeling Tables
 
-<div className="flex items-center gap-4 my-8 flex-wrap">
-<IconBadge Icon="Database" label="Code-first schema" variant="moose" />
-<IconBadge Icon="Check" label="Type-safe" variant="moose" />
-<IconBadge Icon="DeviceLaptop" label="Hot-reload" variant="moose" />
+<div className="flex items-center gap-2 mt-4 mb-4 flex-wrap">
+  <Badge variant="outline" className="bg-muted border-border text-muted-foreground">Code-first schema</Badge>
+  <Badge variant="outline" className="bg-muted border-border text-muted-foreground">Type-safe</Badge>
+  <Badge variant="outline" className="bg-muted border-border text-muted-foreground">Hot-reload</Badge>
 </div>
 
 ## Overview

apps/framework-docs-v2/content/moosestack/quickstart.mdx

@@ -5,14 +5,15 @@ order: 0
 category: getting-started
 ---
 
-import { Callout, ToggleBlock, LanguageTabs, LanguageTabContent, MuxVideo, BulletPointsCard, IconBadge, FileTree, Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/mdx";
+import { Callout, ToggleBlock, LanguageTabs, LanguageTabContent, MuxVideo, BulletPointsCard, FileTree, Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/mdx";
+import { Badge } from "@/components/ui/badge";
 
 # 5-Minute Quickstart
 
-<div className="flex items-center gap-4 my-8 flex-wrap">
-<IconBadge Icon="Clock" label="5 minute setup" variant="moose" />
-<IconBadge Icon="Check" label="Zero config" variant="moose" />
-<IconBadge Icon="DeviceLaptop" label="Local ClickHouse, Redpanda, and APIs" variant="moose" />
+<div className="flex items-center gap-2 mt-4 mb-4 flex-wrap">
+  <Badge variant="outline" className="bg-muted border-border text-muted-foreground">5 minute setup</Badge>
+  <Badge variant="outline" className="bg-muted border-border text-muted-foreground">Zero config</Badge>
+  <Badge variant="outline" className="bg-muted border-border text-muted-foreground">Local ClickHouse, Redpanda, and APIs</Badge>
 </div>
 
 <LanguageTabs>

apps/framework-docs-v2/src/app/(docs)/[...slug]/page.tsx

@@ -108,19 +108,30 @@ export default async function DocPage({ params }: PageProps) {
   // Copy button is always enabled - it's a client component that works with static pages
   const showCopyButton = true;
 
+  // Hide breadcrumbs for top-level section index pages
+  const topLevelIndexPages = [
+    "moosestack",
+    "moosestack/index",
+    "hosting/overview",
+    "hosting/index",
+    "ai/overview",
+    "ai/index",
+  ];
+  const isTopLevelIndex = topLevelIndexPages.includes(slug);
+
   return (
     <>
-      <div className="flex w-full flex-col gap-6 pt-4">
+      <div className="flex w-full min-w-0 flex-col gap-6 pt-4">
         <div className="flex items-center justify-between">
-          <DocBreadcrumbs items={breadcrumbs} />
+          {!isTopLevelIndex && <DocBreadcrumbs items={breadcrumbs} />}
           {showCopyButton && (
             <MarkdownMenu
               content={content.content}
               isMDX={content.isMDX ?? false}
             />
           )}
         </div>
-        <article className="prose prose-slate dark:prose-invert max-w-none w-full min-w-0">
+        <article className="prose dark:prose-invert max-w-none w-full min-w-0 overflow-x-auto">
           {content.isMDX ?
             <MDXRenderer source={content.content} />
           : <div dangerouslySetInnerHTML={{ __html: content.content }} />}

apps/framework-docs-v2/src/app/(docs)/guides/[...slug]/page.tsx

@@ -12,6 +12,8 @@ import { MDXRenderer } from "@/components/mdx-renderer";
 import { DocBreadcrumbs } from "@/components/navigation/doc-breadcrumbs";
 import { DynamicGuideBuilder } from "@/components/guides/dynamic-guide-builder";
 import { MarkdownMenu } from "@/components/markdown-menu";
+import { GuideIcon } from "@/components/guides/guide-header";
+import { getGuideMetadataBySlug } from "@/config/navigation";
 
 // Force static generation despite searchParams access
 export const dynamic = "force-static";
@@ -109,14 +111,17 @@ export default async function GuidePage({ params }: PageProps) {
   // Check if this is a dynamic guide by checking for guide.toml
   const guideManifest = await parseGuideManifest(slug);
 
+  // Get guide metadata (icon) from navigation config
+  const guideMetadata = getGuideMetadataBySlug(slug);
+
   if (guideManifest) {
     // DYNAMIC GUIDE LOGIC
     // Dynamic guides show a form first, steps load based on user selection
     // No steps are pre-rendered - they load when user makes selections
 
     return (
       <>
-        <div className="flex w-full flex-col gap-6 pt-4">
+        <div className="flex w-full min-w-0 flex-col gap-6 pt-4">
           <div className="flex items-center justify-between">
             <DocBreadcrumbs items={breadcrumbs} />
             {showCopyButton && (
@@ -126,7 +131,8 @@ export default async function GuidePage({ params }: PageProps) {
               />
             )}
           </div>
-          <article className="prose prose-slate dark:prose-invert max-w-none w-full min-w-0">
+          <GuideIcon iconName={guideMetadata?.iconName} />
+          <article className="prose dark:prose-invert max-w-none w-full min-w-0 overflow-x-auto">
             {content.isMDX ?
               <MDXRenderer source={content.content} />
             : <div dangerouslySetInnerHTML={{ __html: content.content }} />}
@@ -197,7 +203,7 @@ export default async function GuidePage({ params }: PageProps) {
 
   return (
     <>
-      <div className="flex w-full flex-col gap-6 pt-4">
+      <div className="flex w-full min-w-0 flex-col gap-6 pt-4">
         <div className="flex items-center justify-between">
           <DocBreadcrumbs items={breadcrumbs} />
           {showCopyButton && (
@@ -207,7 +213,8 @@ export default async function GuidePage({ params }: PageProps) {
             />
           )}
         </div>
-        <article className="prose prose-slate dark:prose-invert max-w-none w-full min-w-0">
+        <GuideIcon iconName={guideMetadata?.iconName} />
+        <article className="prose dark:prose-invert max-w-none w-full min-w-0 overflow-x-auto">
           {content.isMDX ?
             <MDXRenderer source={content.content} />
           : <div dangerouslySetInnerHTML={{ __html: content.content }} />}
@@ -217,7 +224,7 @@ export default async function GuidePage({ params }: PageProps) {
             <article
               key={`step-${step.stepNumber}`}
               id={`step-${step.stepNumber}`}
-              className="prose prose-slate dark:prose-invert max-w-none w-full min-w-0 scroll-mt-20"
+              className="prose dark:prose-invert max-w-none w-full min-w-0 overflow-x-auto scroll-mt-20"
             >
               <h2>
                 {step.stepNumber}. {step.title}

apps/framework-docs-v2/src/app/(docs)/layout.tsx

@@ -1,5 +1,4 @@
-import type { ReactNode } from "react";
-import { Suspense } from "react";
+import React, { type ReactNode, Suspense } from "react";
 import { SideNavServer } from "@/components/navigation/side-nav-server";
 import { SidebarInset } from "@/components/ui/sidebar";
 import { AnalyticsProvider } from "@/components/analytics-provider";
@@ -8,17 +7,19 @@ interface DocLayoutProps {
   children: ReactNode;
 }
 
-export default function DocLayout({ children }: DocLayoutProps) {
+export default function DocLayout({
+  children,
+}: DocLayoutProps): React.JSX.Element {
   return (
     <AnalyticsProvider>
-      <div className="flex flex-1">
+      <div className="flex flex-1 min-w-0 w-full overflow-hidden">
         <Suspense fallback={<div className="w-64" />}>
           <SideNavServer />
         </Suspense>
         <SidebarInset>
-          <div className="container flex-1 pt-6 pb-12 lg:pt-8">
+          <div className="w-full min-w-0 flex-1 pt-6 pb-12 lg:pt-8 px-4 sm:px-6 lg:px-8 overflow-x-hidden">
             {/* Reserve space for the right TOC on xl+ screens */}
-            <main className="relative flex flex-col gap-10 xl:grid xl:grid-cols-[minmax(0,1fr)_240px] xl:gap-12">
+            <main className="relative flex flex-col gap-10 xl:grid xl:grid-cols-[minmax(0,1fr)_240px] xl:gap-12 min-w-0 w-full max-w-5xl lg:max-w-6xl mx-auto">
               {children}
             </main>
           </div>