fix responsive (#135)

components/Layout.tsx

@@ -1,3 +1,4 @@
+import { ResponsiveContainer } from 'recharts'
 import ClientWrapper from './ClientWrapper'
 import Header from './Header'
 import Navigation from './Navigation'
@@ -10,9 +11,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         <Navigation viewPort='main' />
         <div className="flex-1 flex flex-col">
           <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 dark:bg-gray-900 relative">
-            <ClientWrapper>
-              {children}
-            </ClientWrapper>
+            {/* responsive container (optimized for mobile) */}
+            <div className="mx-auto px-2 xs:px-4 py-8 max-w-sm xs:max-w-full">
+              <ClientWrapper>
+                {children}
+              </ClientWrapper>
+            </div>
           </main>
           <Navigation viewPort='mobile' />
         </div>