From c9da6ec2e09ee2ca00e2e35eaf5edecb2950b257 Mon Sep 17 00:00:00 2001
From: Karolis Ramanauskas <hello@karolisram.com>
Date: Fri, 22 Nov 2024 09:21:42 +0200
Subject: [PATCH] chore(explorer): polishes (#3379)

---
 .../(explorer)/[chainName]/worlds/WorldsForm.tsx | 16 +++++++++++++++-
 .../worlds/[worldAddress]/interact/page.tsx      |  6 +++++-
 .../[chainName]/worlds/[worldAddress]/layout.tsx |  6 ++----
 packages/explorer/tailwind.config.ts             |  2 +-
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/WorldsForm.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/WorldsForm.tsx
index d590fcfc20..86533d4fdc 100644
--- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/WorldsForm.tsx
+++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/WorldsForm.tsx
@@ -45,6 +45,12 @@ export function WorldsForm({ worlds }: { worlds: Address[] }) {
     }
   }
 
+  const handleOpenOptions = () => {
+    if (!open && worlds.length > 0) {
+      setOpen(true);
+    }
+  };
+
   return (
     <div className="mx-auto flex min-h-screen w-[450px] flex-col items-center justify-center p-4">
       <h1 className="flex items-center gap-6 self-start font-mono text-4xl font-bold uppercase">
@@ -71,8 +77,15 @@ export function WorldsForm({ worlds }: { worlds: Address[] }) {
                           field.onBlur();
                           setOpen(false);
                         }}
-                        onFocus={() => setOpen(true)}
+                        onFocus={handleOpenOptions}
                         placeholder="Enter world address..."
+                        // Need to manually trigger form submission as CommandPrimitive.Input captures Enter key events
+                        onKeyDown={(e) => {
+                          if (!open && e.key === "Enter") {
+                            e.preventDefault();
+                            form.handleSubmit(onSubmit)();
+                          }
+                        }}
                       >
                         <Input className="h-12" />
                       </CommandPrimitive.Input>
@@ -101,6 +114,7 @@ export function WorldsForm({ worlds }: { worlds: Address[] }) {
                                   shouldValidate: true,
                                 });
                                 setOpen(false);
+                                form.handleSubmit(onSubmit)();
                               }}
                               className="cursor-pointer font-mono"
                             >
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/interact/page.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/interact/page.tsx
index 9e2234950a..4e524636bb 100644
--- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/interact/page.tsx
+++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/interact/page.tsx
@@ -6,5 +6,9 @@ export const metadata: Metadata = {
 };
 
 export default async function InteractPage() {
-  return <InteractForm />;
+  return (
+    <div className="flex h-[calc(100vh-70px)] flex-col">
+      <InteractForm />
+    </div>
+  );
 }
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/layout.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/layout.tsx
index ffa329b67d..4e1d2afe79 100644
--- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/layout.tsx
+++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/layout.tsx
@@ -22,10 +22,8 @@ export default function WorldLayout({ params: { chainName }, children }: Props)
 
   return (
     <Providers>
-      <div className="flex h-screen flex-col">
-        <Navigation />
-        {children}
-      </div>
+      <Navigation />
+      {children}
       <TransactionsWatcher />
     </Providers>
   );
diff --git a/packages/explorer/tailwind.config.ts b/packages/explorer/tailwind.config.ts
index 4ea11a90ca..f99829666d 100644
--- a/packages/explorer/tailwind.config.ts
+++ b/packages/explorer/tailwind.config.ts
@@ -7,7 +7,7 @@ const config = {
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: "1rem",
       screens: {
         "2xl": "1400px",
       },