Limit example width to screen (#1314)

cartridge-gg · Jan 22, 2025 · ae507b7 · ae507b7
1 parent 5905332
commit ae507b7
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 43 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   );
 };