fix(ui): page not suitable for big screen

web/package.json

@@ -17,21 +17,21 @@
     "@biomejs/biome": "2.1.4",
     "@react-router/dev": "^7.8.2",
     "@types/node": "^24.3.0",
-    "@types/react": "^19.1.11",
+    "@types/react": "^19.1.12",
     "@types/react-copy-to-clipboard": "^5.0.7",
-    "@types/react-dom": "^19.1.7",
+    "@types/react-dom": "^19.1.9",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@vitejs/plugin-react": "^5.0.1",
+    "@vitejs/plugin-react": "^5.0.2",
     "rimraf": "^6.0.1",
     "tailwindcss": "^4.1.12",
     "typescript": "^5.9.2",
-    "vite": "^7.1.3",
+    "vite": "^7.1.4",
     "vite-bundle-visualizer": "^1.2.1"
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.1",
     "@tailwindcss/vite": "^4.1.12",
-    "@tanstack/react-query": "^5.85.5",
+    "@tanstack/react-query": "^5.85.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.12",
@@ -43,13 +43,13 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^19.1.1",
     "react-hook-form": "^7.62.0",
-    "react-i18next": "^15.7.2",
+    "react-i18next": "^15.7.3",
     "react-router": "^7.8.2",
     "react-router-dom": "^7.8.2",
     "react-syntax-highlighter": "^15.6.6",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
-    "tw-animate-css": "^1.3.7",
+    "tw-animate-css": "^1.3.8",
     "yup": "^1.7.0"
   },
   "trustedDependencies": [

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

@@ -12,9 +12,11 @@ import {
 export function MultiPackResult({
   allPackResults,
   packMethod,
+  height = 350,
 }: Readonly<{
   allPackResults: object | undefined;
   packMethod: string;
+  height?: number;
 }>) {
   const showCode = packMethod === "JSP";
   const { t } = useTranslation();
@@ -67,7 +69,7 @@ export function MultiPackResult({
       wrapLongLines={!showCode}
       showLineNumbers={showCode}
       language={showCode ? "java" : "text"}
-      height={350}
+      height={height}
     />
   );
 }

web/src/components/probeshell/shell-result.tsx

@@ -27,6 +27,7 @@ export default function ShellResult({
     return <QuickUsage />;
   }
   const showCode = packMethod === "JSP";
+  const height = 550;
   return (
     <Tabs defaultValue="packResult">
       <TabsList className="grid w-full grid-cols-1">
@@ -40,6 +41,7 @@ export default function ShellResult({
           <MultiPackResult
             allPackResults={allPackResults}
             packMethod={packMethod}
+            height={height}
           />
         )}
         {packResult && (
@@ -58,7 +60,7 @@ export default function ShellResult({
             wrapLongLines={!showCode}
             showLineNumbers={showCode}
             language={showCode ? "java" : "text"}
-            height={350}
+            height={height}
           />
         )}
       </TabsContent>

web/src/pages/memshell.tsx

@@ -122,36 +122,40 @@ export default function MemShellPage() {
   };
 
   return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className="flex flex-col xl:flex-row gap-4 p-4"
-      >
-        <div className="w-full xl:w-1/2 space-y-4">
-          <MainConfigCard
-            servers={serverConfig}
-            mainConfig={mainConfig}
-            form={form}
-          />
-          <PackageConfigCard packerConfig={packerConfig} form={form} />
-          <Button className="w-full" type="submit" disabled={isActionPending}>
-            {isActionPending ? (
-              <LoaderCircle className="animate-spin" />
-            ) : (
-              <WandSparklesIcon />
-            )}
-            {t("memshell:buttons.generate")}
-          </Button>
-        </div>
-        <div className="w-full xl:w-1/2 space-y-4">
-          <ShellResult
-            packMethod={packMethod}
-            generateResult={generateResult}
-            packResult={packResult}
-            allPackResults={allPackResults}
-          />
-        </div>
-      </form>
-    </Form>
+    <div className="bg-background">
+      <div className="container mx-auto max-w-7xl p-4">
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col xl:flex-row gap-6"
+          >
+            <div className="w-full xl:w-1/2 space-y-4">
+              <MainConfigCard
+                servers={serverConfig}
+                mainConfig={mainConfig}
+                form={form}
+              />
+              <PackageConfigCard packerConfig={packerConfig} form={form} />
+              <Button className="w-full" type="submit" disabled={isActionPending}>
+                {isActionPending ? (
+                  <LoaderCircle className="animate-spin" />
+                ) : (
+                  <WandSparklesIcon />
+                )}
+                {t("memshell:buttons.generate")}
+              </Button>
+            </div>
+            <div className="w-full xl:w-1/2 space-y-4">
+              <ShellResult
+                packMethod={packMethod}
+                generateResult={generateResult}
+                packResult={packResult}
+                allPackResults={allPackResults}
+              />
+            </div>
+          </form>
+        </Form>
+      </div>
+    </div>
   );
 }

web/src/pages/probeshell.tsx

@@ -100,32 +100,36 @@ export default function ProbeShellGenerator() {
     });
   };
   return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className="flex flex-col xl:flex-row gap-4 p-4"
-      >
-        <div className="w-full xl:w-1/2 space-y-4">
-          <MainConfigCard form={form} servers={serverConfig} />
-          <PackageConfigCard form={form} packerConfig={packerConfig} />
-          <Button className="w-full" type="submit" disabled={isActionPending}>
-            {isActionPending ? (
-              <LoaderCircle className="animate-spin" />
-            ) : (
-              <WandSparklesIcon />
-            )}
-            {t("probeshell:buttons.generate")}
-          </Button>
-        </div>
-        <div className="w-full xl:w-1/2 space-y-4">
-          <ShellResult
-            packMethod={packMethod}
-            generateResult={generateResult}
-            packResult={packResult}
-            allPackResults={allPackResults}
-          />
-        </div>
-      </form>
-    </Form>
+    <div className="bg-background">
+      <div className="container mx-auto max-w-7xl p-4">
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col xl:flex-row gap-6"
+          >
+            <div className="w-full xl:w-1/2 space-y-6">
+              <MainConfigCard form={form} servers={serverConfig} />
+              <PackageConfigCard form={form} packerConfig={packerConfig} />
+              <Button className="w-full" type="submit" disabled={isActionPending}>
+                {isActionPending ? (
+                  <LoaderCircle className="animate-spin" />
+                ) : (
+                  <WandSparklesIcon />
+                )}
+                {t("probeshell:buttons.generate")}
+              </Button>
+            </div>
+            <div className="w-full xl:w-1/2 space-y-6">
+              <ShellResult
+                packMethod={packMethod}
+                generateResult={generateResult}
+                packResult={packResult}
+                allPackResults={allPackResults}
+              />
+            </div>
+          </form>
+        </Form>
+      </div>
+    </div>
   );
 }