Merge pull request #16 from croossin/roo/bug/fix-mobile-example

Fix mobile viewport bug
croossin · Dec 29, 2023 · 217255d · 217255d
2 parents 4e1ebf6 + 64e0b52
commit 217255d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/.changeset/fix-highlight-width-bug.md b/.changeset/fix-highlight-width-bug.md
@@ -0,0 +1,6 @@
+---
+"@roo-app/react-code-block": patch
+---
+
+- Fix the example on mobile. The screen width was not being used properly
+-
diff --git a/example/src/app/layout.tsx b/example/src/app/layout.tsx
@@ -12,7 +12,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className="h-full antialiased" suppressHydrationWarning>
+    <html
+      lang="en"
+      className="h-full antialiased w-full"
+      suppressHydrationWarning
+    >
       <body>
         <Providers>{children}</Providers>
       </body>

diff --git a/example/src/app/page.tsx b/example/src/app/page.tsx
@@ -24,9 +24,9 @@ export default function Home() {
   }, [resolvedTheme]);
 
   return (
-    <main className="flex min-h-screen flex-col bg-white dark:bg-slate-800">
-      <div className="max-w-3xl mx-auto">
-        <div className="flex flex-col space-y-8 py-8">
+    <main>
+      <div className="flex w-full flex-col bg-white dark:bg-slate-800 p-8 mx-auto">
+        <div className="max-w-3xl flex flex-col space-y-8 py-8">
           <button
             type="button"
             className="rounded bg-white px-2 py-1 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"