fix(ui): page not suitable for big screen

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>
   );
 }