Jelajahi Sumber

fix: prevent horizontal overflow on mobile (#4)

Shiven Aggarwal 5 bulan lalu
induk
melakukan
e7c78a8302
3 mengubah file dengan 5 tambahan dan 5 penghapusan
  1. 2 2
      apps/web/app/page.tsx
  2. 1 1
      apps/web/components/code.tsx
  3. 2 2
      apps/web/components/demo.tsx

+ 2 - 2
apps/web/app/page.tsx

@@ -89,7 +89,7 @@ export default function Home() {
       <section className="border-t border-border">
         <div className="max-w-5xl mx-auto px-6 py-24">
           <div className="grid lg:grid-cols-2 gap-12">
-            <div>
+            <div className="min-w-0">
               <h2 className="text-2xl font-semibold mb-4">
                 Define your catalog
               </h2>
@@ -121,7 +121,7 @@ export const catalog = createCatalog({
   },
 });`}</Code>
             </div>
-            <div>
+            <div className="min-w-0">
               <h2 className="text-2xl font-semibold mb-4">AI generates JSON</h2>
               <p className="text-muted-foreground mb-6">
                 Constrained output that your components render natively.

+ 1 - 1
apps/web/components/code.tsx

@@ -151,7 +151,7 @@ export async function Code({ children, lang = "typescript" }: CodeProps) {
   });
 
   return (
-    <div className="group relative my-6 rounded-lg border border-border bg-neutral-100 dark:bg-[#0a0a0a] text-sm font-mono overflow-hidden">
+    <div className="group relative my-6 rounded-lg border border-border bg-neutral-100 dark:bg-[#0a0a0a] text-sm font-mono overflow-hidden max-w-full">
       <div className="absolute top-3 right-3 z-10">
         <CopyButton
           text={children.trim()}

+ 2 - 2
apps/web/components/demo.tsx

@@ -403,7 +403,7 @@ export function Demo() {
 
       <div className="grid lg:grid-cols-2 gap-4">
         {/* Tabbed code/stream/json panel */}
-        <div>
+        <div className="min-w-0">
           <div className="flex items-center gap-4 mb-2 h-6">
             {(["json", "stream", "code"] as const).map((tab) => (
               <button
@@ -448,7 +448,7 @@ export function Demo() {
         </div>
 
         {/* Rendered output using json-render */}
-        <div>
+        <div className="min-w-0">
           <div className="flex items-center justify-between mb-2 h-6">
             <div className="text-xs text-muted-foreground font-mono">
               render