fix(ui): use shellTool selector

Author: ReaJason

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} />

web/src/index.css

@@ -160,6 +160,12 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  html, body {
+    overflow: hidden;
+    height: 100%;
+    margin: 0;
+  }
 }
 
 .tabs-list {

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}

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}