chore(explorer): polishes (#3379)

latticexyz · Nov 22, 2024 · c9da6ec · c9da6ec
1 parent 11b32fa
commit c9da6ec
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -7,7 +7,7 @@ const config = {
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: "1rem",
       screens: {
         "2xl": "1400px",
       },