refactor(ui): standardize modal responsive layout in app installer page

src/app/apps/page.tsx

@@ -1001,16 +1001,14 @@ function InstallModal({
   if (!mounted) return null;
 
   return createPortal(
-    <div className="modal-overlay">
-      <div
-        className="modal-shell"
-        style={{ width: "min(1100px, calc(100% - 48px))", maxWidth: 1100 }}
-      >
+    <div className="modal-overlay modal-overlay-wide">
+      <div className="modal-shell modal-shell-wide">
         <button
           type="button"
           onClick={onClose}
           className="modal-close"
-          aria-label="Close install modal"
+          aria-label="Close modal"
+          title="Close"
         >
           <X size={22} />
         </button>
@@ -1077,7 +1075,9 @@ function InstallModal({
                     : "var(--bg-card)",
                 color: mode === "template" ? "#3b82f6" : "var(--text-muted)",
                 borderColor:
-                mode === "template" ? "rgba(59,130,246,0.35)" : "var(--border)",
+                  mode === "template"
+                    ? "rgba(59,130,246,0.35)"
+                    : "var(--border)",
                 opacity: hasTemplate ? 1 : 0.5,
               }}
             >
@@ -1089,7 +1089,9 @@ function InstallModal({
               className="btn"
               style={{
                 background:
-                mode === "custom" ? "rgba(15,118,110,0.12)" : "var(--bg-card)",
+                  mode === "custom"
+                    ? "rgba(15,118,110,0.12)"
+                    : "var(--bg-card)",
                 color: mode === "custom" ? "#0f766e" : "var(--text-muted)",
                 borderColor:
                   mode === "custom" ? "rgba(15,118,110,0.35)" : "var(--border)",
@@ -1429,7 +1431,9 @@ function InstallModal({
                   <Plus size={13} /> Add Port
                 </button>
               </div>
-            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+              <div
+                style={{ display: "flex", flexDirection: "column", gap: 10 }}
+              >
                 {ports.length === 0 && (
                   <div style={{ fontSize: 12, color: "var(--text-muted)" }}>
                     No port mappings yet.
@@ -1447,7 +1451,9 @@ function InstallModal({
                     <input
                       className="input"
                       value={row.host}
-                    onChange={(e) => updatePort(index, "host", e.target.value)}
+                      onChange={(e) =>
+                        updatePort(index, "host", e.target.value)
+                      }
                       placeholder="Host port"
                     />
                     <input
@@ -1523,7 +1529,9 @@ function InstallModal({
                   <Plus size={13} /> Add Volume
                 </button>
               </div>
-            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+              <div
+                style={{ display: "flex", flexDirection: "column", gap: 10 }}
+              >
                 {volumes.length === 0 && (
                   <div style={{ fontSize: 12, color: "var(--text-muted)" }}>
                     No mounted paths yet.
@@ -1597,13 +1605,18 @@ function InstallModal({
                   type="button"
                   className="btn"
                   onClick={() =>
-                  setEnvVars((current) => [...current, { key: "", value: "" }])
+                    setEnvVars((current) => [
+                      ...current,
+                      { key: "", value: "" },
+                    ])
                   }
                 >
                   <Plus size={13} /> Add Env Var
                 </button>
               </div>
-            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+              <div
+                style={{ display: "flex", flexDirection: "column", gap: 10 }}
+              >
                 {envVars.length === 0 && (
                   <div style={{ fontSize: 12, color: "var(--text-muted)" }}>
                     No environment variables yet.
@@ -1627,7 +1640,9 @@ function InstallModal({
                     <input
                       className="input"
                       value={row.value}
-                    onChange={(e) => updateEnv(index, "value", e.target.value)}
+                      onChange={(e) =>
+                        updateEnv(index, "value", e.target.value)
+                      }
                       placeholder="value"
                     />
                     <button
@@ -1646,13 +1661,17 @@ function InstallModal({
               </div>
             </div>
 
-          <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
+            <div
+              style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}
+            >
               <button type="button" onClick={onClose} className="btn">
                 Cancel
               </button>
               <button
                 type="submit"
-              disabled={loading || dockerStatusLoading || dockerInstallLoading}
+                disabled={
+                  loading || dockerStatusLoading || dockerInstallLoading
+                }
                 style={{
                   display: "flex",
                   alignItems: "center",