From ae507b767ee9ad60d4f49f6ec497a66bf9b30580 Mon Sep 17 00:00:00 2001
From: Junichi Sugiura <jun.sugiura.jp@gmail.com>
Date: Thu, 23 Jan 2025 00:17:28 +0900
Subject: [PATCH] Limit example width to screen (#1314)

---
 examples/next/src/app/page.tsx                |  2 +-
 .../next/src/components/DelegateAccount.tsx   |  7 ++--
 examples/next/src/components/InvalidTxn.tsx   |  3 +-
 .../next/src/components/ManualTransferEth.tsx | 39 ++++++++++---------
 examples/next/src/components/Profile.tsx      |  9 +++--
 examples/next/src/components/Transfer.tsx     | 35 +++++++++--------
 6 files changed, 52 insertions(+), 43 deletions(-)

diff --git a/examples/next/src/app/page.tsx b/examples/next/src/app/page.tsx
index 9e2a00b05..67c15acde 100644
--- a/examples/next/src/app/page.tsx
+++ b/examples/next/src/app/page.tsx
@@ -14,7 +14,7 @@ import { Transfer } from "components/Transfer";
 
 const Home: FC = () => {
   return (
-    <main className="flex flex-col p-4 gap-4">
+    <main className="w-screen overflow-x-hidden flex flex-col p-4 gap-4">
       <div className="flex justify-between">
         <h2 className="text-3xl font-bold underline text-primary">
           Controller Example (Next.js)
diff --git a/examples/next/src/components/DelegateAccount.tsx b/examples/next/src/components/DelegateAccount.tsx
index c4347f222..a2461ec5c 100644
--- a/examples/next/src/components/DelegateAccount.tsx
+++ b/examples/next/src/components/DelegateAccount.tsx
@@ -63,7 +63,8 @@ export const DelegateAccount = () => {
   return (
     <div className="flex flex-col gap-2">
       <h2>Delegate account</h2>
-      <p>
+
+      <div className="flex items-center gap-2">
         Address:{" "}
         {isDelegateSupported ? (
           <>
@@ -73,9 +74,9 @@ export const DelegateAccount = () => {
         ) : (
           "Not deployed"
         )}
-      </p>
+      </div>
 
-      <div className="flex gap-2">
+      <div className="flex items-center gap-2">
         <Input
           className="max-w-40"
           type="text"
diff --git a/examples/next/src/components/InvalidTxn.tsx b/examples/next/src/components/InvalidTxn.tsx
index f6f1c6294..df5a9ef8c 100644
--- a/examples/next/src/components/InvalidTxn.tsx
+++ b/examples/next/src/components/InvalidTxn.tsx
@@ -26,7 +26,8 @@ export function InvalidTxn() {
   return (
     <div>
       <h2>Invalid Entry Point</h2>
-      <div>
+
+      <div className="flex flex-wrap gap-1">
         <Button
           onClick={() =>
             account.execute([
diff --git a/examples/next/src/components/ManualTransferEth.tsx b/examples/next/src/components/ManualTransferEth.tsx
index e4d9299b5..3013b4799 100644
--- a/examples/next/src/components/ManualTransferEth.tsx
+++ b/examples/next/src/components/ManualTransferEth.tsx
@@ -50,25 +50,28 @@ export const ManualTransferEth = () => {
   return (
     <div>
       <h2>Manual Transfer Eth</h2>
-      <Button onClick={() => execute("0x0")} disabled={submitted}>
-        Transfer 0 ETH to self
-      </Button>
-      <Button onClick={() => execute("0x1C6BF52634000")} disabled={submitted}>
-        Transfer 0.005 ETH to self
-      </Button>
-      <Button
-        onClick={() => execute("1B1AE4D6E2EF500000")}
-        disabled={submitted}
-      >
-        Transfer 500 ETH to self
-      </Button>
-      {txnHash && (
-        <>
-          <p>Transaction: {txnHash}</p>
 
-          <p>Chain: {network}</p>
-        </>
-      )}
+      <div className="flex flex-wrap gap-1">
+        <Button onClick={() => execute("0x0")} disabled={submitted}>
+          Transfer 0 ETH to self
+        </Button>
+        <Button onClick={() => execute("0x1C6BF52634000")} disabled={submitted}>
+          Transfer 0.005 ETH to self
+        </Button>
+        <Button
+          onClick={() => execute("1B1AE4D6E2EF500000")}
+          disabled={submitted}
+        >
+          Transfer 500 ETH to self
+        </Button>
+        {txnHash && (
+          <>
+            <p>Transaction: {txnHash}</p>
+
+            <p>Chain: {network}</p>
+          </>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/examples/next/src/components/Profile.tsx b/examples/next/src/components/Profile.tsx
index e20c6c2c0..8687264a6 100644
--- a/examples/next/src/components/Profile.tsx
+++ b/examples/next/src/components/Profile.tsx
@@ -29,10 +29,11 @@ export function Profile() {
   }
 
   return (
-    <div>
+    <div className="">
       <h2>Open Profile</h2>
+
       <div className="flex flex-col gap-1">
-        <div className="flex gap-1">
+        <div className="flex flex-wrap gap-1">
           <Button onClick={() => ctrlConnector.controller.openProfile()}>
             Inventory
           </Button>
@@ -52,7 +53,7 @@ export function Profile() {
             Activity
           </Button>
         </div>
-        <div className="flex gap-1">
+        <div className="flex flex-wrap gap-1">
           <Button
             onClick={() =>
               ctrlConnector.controller.openProfileTo(
@@ -72,7 +73,7 @@ export function Profile() {
             Open to Token ETH Send
           </Button>
         </div>
-        <div className="flex gap-1">
+        <div className="flex flex-wrap gap-1">
           <Button
             onClick={() =>
               ctrlConnector.controller.openProfileAt(
diff --git a/examples/next/src/components/Transfer.tsx b/examples/next/src/components/Transfer.tsx
index 91ee89637..12cd3d8ef 100644
--- a/examples/next/src/components/Transfer.tsx
+++ b/examples/next/src/components/Transfer.tsx
@@ -50,22 +50,25 @@ export const Transfer = () => {
   return (
     <div>
       <h2>Session Transfer STRK</h2>
-      <Button onClick={() => execute("0x0")}>Transfer 0 STRK to self</Button>
-      <Button onClick={() => execute("0x1C6BF52634000")} disabled={submitted}>
-        Transfer 0.005 STRK to self
-      </Button>
-      <Button
-        onClick={() => execute("1B1AE4D6E2EF500000")}
-        disabled={submitted}
-      >
-        Transfer 500 STRK to self
-      </Button>
-      {txnHash && (
-        <>
-          <p>Transaction: {txnHash}</p>
-          <p>Chain: {network}</p>
-        </>
-      )}
+
+      <div className="flex flex-wrap gap-1">
+        <Button onClick={() => execute("0x0")}>Transfer 0 STRK to self</Button>
+        <Button onClick={() => execute("0x1C6BF52634000")} disabled={submitted}>
+          Transfer 0.005 STRK to self
+        </Button>
+        <Button
+          onClick={() => execute("1B1AE4D6E2EF500000")}
+          disabled={submitted}
+        >
+          Transfer 500 STRK to self
+        </Button>
+        {txnHash && (
+          <>
+            <p>Transaction: {txnHash}</p>
+            <p>Chain: {network}</p>
+          </>
+        )}
+      </div>
     </div>
   );
 };