From d9dd15bd058f214c0cbf9562d564d8e90072c6c5 Mon Sep 17 00:00:00 2001
From: ReaJason <reajason1225@gmail.com>
Date: Wed, 3 Sep 2025 20:08:42 +0800
Subject: [PATCH] fix(ui): use shellTool selector

---
 .../components/memshell/main-config-card.tsx  | 41 +++++++++++--------
 web/src/index.css                             |  6 +++
 web/src/pages/memshell.tsx                    |  4 +-
 web/src/pages/probeshell.tsx                  |  4 +-
 4 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/web/src/components/memshell/main-config-card.tsx b/web/src/components/memshell/main-config-card.tsx
index 1b717226..916c56b7 100644
--- a/web/src/components/memshell/main-config-card.tsx
+++ b/web/src/components/memshell/main-config-card.tsx
@@ -393,22 +393,31 @@ export default function MainConfigCard({
         }}
         className="w-full"
       >
-        <div className="relative bg-muted rounded-lg">
-          <TabsList className="flex flex-wrap gap-1 w-full bg-transparent overflow-x-auto tabs-list">
-            {shellTools.map((shellTool) => (
-              <TabsTrigger
-                key={shellTool}
-                value={shellTool}
-                className="flex-1 min-w-24 data-[state=active]:bg-background"
-              >
-                <span className="flex items-center gap-2">
-                  {shellToolIcons[shellTool]}
-                  {shellTool}
-                </span>
-              </TabsTrigger>
-            ))}
-          </TabsList>
-        </div>
+        <FormField
+          control={form.control}
+          name="shellTool"
+          render={({ field }) => (
+            <FormItem>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {shellTools.map((tool) => (
+                    <SelectItem key={tool} value={tool}>
+                      <span className="flex items-center gap-2">
+                        {shellToolIcons[tool]}
+                        {tool}
+                      </span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </FormItem>
+          )}
+        />
 
         <GodzillaTabContent form={form} shellTypes={shellTypes} />
         <CommandTabContent form={form} shellTypes={shellTypes} />
diff --git a/web/src/index.css b/web/src/index.css
index 3c9dbc24..4b8ddd14 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -160,6 +160,12 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  html, body {
+    overflow: hidden;
+    height: 100%;
+    margin: 0;
+  }
 }
 
 .tabs-list {
diff --git a/web/src/pages/memshell.tsx b/web/src/pages/memshell.tsx
index 8cc85247..765e8c6c 100644
--- a/web/src/pages/memshell.tsx
+++ b/web/src/pages/memshell.tsx
@@ -129,7 +129,7 @@ export default function MemShellPage() {
             onSubmit={form.handleSubmit(onSubmit)}
             className="flex flex-col xl:flex-row gap-6"
           >
-            <div className="w-full xl:w-1/2 space-y-4">
+            <div className="w-full xl:w-1/2 flex flex-col gap-2">
               <MainConfigCard
                 servers={serverConfig}
                 mainConfig={mainConfig}
@@ -145,7 +145,7 @@ export default function MemShellPage() {
                 {t("memshell:buttons.generate")}
               </Button>
             </div>
-            <div className="w-full xl:w-1/2 space-y-4">
+            <div className="w-full xl:w-1/2 flex flex-col gap-4">
               <ShellResult
                 packMethod={packMethod}
                 generateResult={generateResult}
diff --git a/web/src/pages/probeshell.tsx b/web/src/pages/probeshell.tsx
index 8277e5f2..711e9d0b 100644
--- a/web/src/pages/probeshell.tsx
+++ b/web/src/pages/probeshell.tsx
@@ -107,7 +107,7 @@ export default function ProbeShellGenerator() {
             onSubmit={form.handleSubmit(onSubmit)}
             className="flex flex-col xl:flex-row gap-6"
           >
-            <div className="w-full xl:w-1/2 space-y-4">
+            <div className="w-full xl:w-1/2 flex flex-col gap-4">
               <MainConfigCard form={form} servers={serverConfig} />
               <PackageConfigCard form={form} packerConfig={packerConfig} />
               <Button className="w-full" type="submit" disabled={isActionPending}>
@@ -119,7 +119,7 @@ export default function ProbeShellGenerator() {
                 {t("probeshell:buttons.generate")}
               </Button>
             </div>
-            <div className="w-full xl:w-1/2 space-y-4">
+            <div className="w-full xl:w-1/2 flex flex-col gap-4">
               <ShellResult
                 packMethod={packMethod}
                 generateResult={generateResult}