chore: enhance phone ui

web/src/components/main-config-card.tsx

@@ -235,7 +235,7 @@ export function MainConfigCard({
               )}
             />
           </div>
-          <div className="flex gap-4 mt-4">
+          <div className="flex gap-4 mt-4 flex-col sm:flex-row">
             <FormField
               control={form.control}
               name="debug"

web/src/components/results/agent.tsx

@@ -1,10 +1,10 @@
 import { downloadBytes } from "@/lib/utils";
 import { GenerateResult } from "@/types/shell";
-import { Separator } from "../ui/separator";
 import { ScrollTextIcon } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Button } from "../ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { Separator } from "../ui/separator";
 
 export function AgentResult({ packResult, generateResult }: { packResult: string; generateResult?: GenerateResult }) {
   const { t } = useTranslation();

web/src/components/results/basic-info.tsx

@@ -13,8 +13,8 @@ import { useTranslation } from "react-i18next";
 import { Fragment } from "react/jsx-runtime";
 import { CopyableField } from "../copyable-field";
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
-import { FeedbackAlert } from "./feedback-alert";
 import { Separator } from "../ui/separator";
+import { FeedbackAlert } from "./feedback-alert";
 
 export function BasicInfo({ generateResult }: { generateResult?: GenerateResult }) {
   const { t } = useTranslation();

web/src/components/results/feedback-alert.tsx

@@ -1,3 +1,5 @@
+import { CircleHelpIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -7,8 +9,6 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "../ui/alert-dialog";
-import { CircleHelpIcon } from "lucide-react";
-import { useTranslation } from "react-i18next";
 import { AlertDialogFooter, AlertDialogHeader } from "../ui/alert-dialog";
 import { Button } from "../ui/button";
 

web/src/components/results/multi-packer.tsx

@@ -1,8 +1,8 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 import { TFunction } from "i18next";
 import { useEffect, useState } from "react";
 import { Fragment } from "react/jsx-runtime";
 import { CodeViewer } from "../code-viewer";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 
 export function MultiPackResult({
   allPackResults,

web/src/components/tools/antsword-tab.tsx

@@ -1,10 +1,10 @@
 import { FormSchema } from "@/types/schema";
-import { TabsContent } from "../ui/tabs";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "../ui/card";
 import { FormField, FormItem, FormLabel } from "../ui/form";
 import { Input } from "../ui/input";
+import { TabsContent } from "../ui/tabs";
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 import { UrlPatternFormField } from "./urlpattern-field";

web/src/components/tools/behinder-tab.tsx

@@ -1,10 +1,10 @@
 import { FormSchema } from "@/types/schema";
-import { TabsContent } from "../ui/tabs";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "../ui/card";
 import { FormField, FormItem, FormLabel } from "../ui/form";
 import { Input } from "../ui/input";
+import { TabsContent } from "../ui/tabs";
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 import { UrlPatternFormField } from "./urlpattern-field";

web/src/components/tools/command-tab.tsx

@@ -1,10 +1,10 @@
 import { FormSchema } from "@/types/schema";
-import { TabsContent } from "../ui/tabs";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "../ui/card";
 import { FormControl, FormField, FormItem, FormLabel } from "../ui/form";
 import { Input } from "../ui/input";
+import { TabsContent } from "../ui/tabs";
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 import { UrlPatternFormField } from "./urlpattern-field";

web/src/components/tools/godzilla-tab.tsx

@@ -1,10 +1,10 @@
 import { FormSchema } from "@/types/schema";
-import { TabsContent } from "../ui/tabs";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "../ui/card";
 import { FormField, FormItem, FormLabel } from "../ui/form";
 import { Input } from "../ui/input";
+import { TabsContent } from "../ui/tabs";
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 import { UrlPatternFormField } from "./urlpattern-field";

web/src/components/tools/neoreg-tab.tsx

@@ -1,10 +1,10 @@
 import { FormSchema } from "@/types/schema";
-import { TabsContent } from "../ui/tabs";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "../ui/card";
 import { FormField, FormItem, FormLabel } from "../ui/form";
 import { Input } from "../ui/input";
+import { TabsContent } from "../ui/tabs";
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 import { UrlPatternFormField } from "./urlpattern-field";

web/src/components/tools/suo5-tab.tsx

@@ -1,10 +1,10 @@
 import { FormSchema } from "@/types/schema";
-import { TabsContent } from "../ui/tabs";
 import { FormProvider, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "../ui/card";
 import { FormField, FormItem, FormLabel } from "../ui/form";
 import { Input } from "../ui/input";
+import { TabsContent } from "../ui/tabs";
 import { OptionalClassFormField } from "./classname-field";
 import { ShellTypeFormField } from "./shelltype-field";
 import { UrlPatternFormField } from "./urlpattern-field";