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,10 +122,12 @@ export default function MemShellPage() {
   };
 
   return (
+    <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-4 p-4"
+            className="flex flex-col xl:flex-row gap-6"
           >
             <div className="w-full xl:w-1/2 space-y-4">
               <MainConfigCard
@@ -153,5 +155,7 @@ export default function MemShellPage() {
             </div>
           </form>
         </Form>
+      </div>
+    </div>
   );
 }

web/src/pages/probeshell.tsx

@@ -100,12 +100,14 @@ export default function ProbeShellGenerator() {
     });
   };
   return (
+    <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-4 p-4"
+            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 space-y-6">
               <MainConfigCard form={form} servers={serverConfig} />
               <PackageConfigCard form={form} packerConfig={packerConfig} />
               <Button className="w-full" type="submit" disabled={isActionPending}>
@@ -117,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 space-y-6">
               <ShellResult
                 packMethod={packMethod}
                 generateResult={generateResult}
@@ -127,5 +129,7 @@ export default function ProbeShellGenerator() {
             </div>
           </form>
         </Form>
+      </div>
+    </div>
   );
 }