fix(example): overflows

router-protocol · Jan 8, 2025 · 5614907 · 5614907
1 parent 258bf03
commit 5614907
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 10 deletions.
diff --git a/example-next/src/app/layout.tsx b/example-next/src/app/layout.tsx
@@ -4,6 +4,7 @@ import { GeistSans } from 'geist/font/sans';
 import { type Metadata } from 'next';
 
 import dynamic from 'next/dynamic';
+import { Suspense } from 'react';
 const Providers = dynamic(() => import('../components/Providers'), {
   ssr: false,
 });
@@ -20,10 +21,14 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
       lang='en'
       className={`${GeistSans.variable}`}
     >
-      <body className='bg-neutral-800'>
-        <Providers>
-          <main className='flex min-h-screen flex-col items-center text-white p-8'>{children}</main>
-        </Providers>
+      <body className='bg-neutral-800 overflow-x-hidden w-[100vw]'>
+        <Suspense>
+          <Providers>
+            <main className='flex min-h-screen w-full overflow-x-auto flex-col items-center text-white p-2'>
+              {children}
+            </main>
+          </Providers>
+        </Suspense>
       </body>
     </html>
   );

diff --git a/example-next/src/components/ConnectedAccounts.tsx b/example-next/src/components/ConnectedAccounts.tsx
@@ -20,7 +20,7 @@ export const ConnectedAccounts = () => {
   });
 
   return (
-    <div className='bg-neutral-900'>
+    <div className='bg-neutral-900 w-full'>
       <h3 className='text-lg font-bold'>Connected Accounts:</h3>
       <table className='w-full'>
         <thead>

diff --git a/example-next/src/components/Example.tsx b/example-next/src/components/Example.tsx
@@ -1,3 +1,4 @@
+'use client';
 import {
   ChainId,
   useChain,
@@ -14,11 +15,11 @@ import WalletList from './WalletList';
 
 function Example() {
   return (
-    <div className='space-y-8'>
+    <div className='space-y-8 w-full'>
       <h1 className='text-2xl font-bold'>Tangled Example</h1>
       <h2 className='text-xl font-bold'>ACCOUNTS</h2>
 
-      <div className='sticky top-0 bg-black py-8'>
+      <div className='sticky top-0 bg-black py-8 w-full'>
         <CurrentAccountAndWallet />
       </div>
 
@@ -60,7 +61,7 @@ const CurrentAccountAndWallet = () => {
   }, [currentAccount?.chainId]);
 
   return (
-    <div className='grid grid-cols-2'>
+    <div className='grid grid-cols-2 w-full'>
       <div>
         <h3 className='text-lg font-bold'>Current Account</h3>
         <table className='w-full'>

diff --git a/example/src/components/Example.tsx b/example/src/components/Example.tsx
@@ -14,7 +14,7 @@ import WalletList from './WalletList';
 
 function Example() {
   return (
-    <div className='space-y-8'>
+    <div className='space-y-8 overflow-x-scroll w-[100vw]'>
       <h1 className='text-2xl font-bold'>Tangled Example</h1>
       <h2 className='text-xl font-bold'>ACCOUNTS</h2>
 

diff --git a/example/src/main.tsx b/example/src/main.tsx
@@ -7,7 +7,7 @@ import './index.css';
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <Providers>
-      <main className='flex min-h-screen flex-col items-center justify-center text-white bg-neutral-800'>
+      <main className='flex min-h-screen w-[100vw] flex-col items-center justify-center text-white bg-neutral-800'>
         <Example />
       </main>
     </Providers>