refactor(ui): standardize modal responsive layout

src/app/apps/installed/page.tsx

@@ -471,18 +471,7 @@ function InstallOperationsModal({
   }, [activeTab, logContent, loading]);
 
   return (
-    <div
-      style={{
-        position: "fixed",
-        inset: 0,
-        background: "rgba(0,0,0,0.72)",
-        zIndex: 1000,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: 16,
-      }}
-    >
+    <div className="modal-overlay">
       <div className="modal-shell" style={{ maxWidth: 1100 }}>
         <button
           type="button"
@@ -533,7 +522,7 @@ function InstallOperationsModal({
               {install.server
                 ? `${install.server.name} (${install.server.ip})`
                 : install.serverId}
-              {install.containerName ? ` • ${install.containerName}` : ""}
+              {install.containerName ? ` • ${install.containerName}` : ""}
             </p>
           </div>
         </div>
@@ -1924,3 +1913,5 @@ export default function InstalledAppsPage() {
     </DashboardLayout>
   );
 }
+
+

src/app/globals.css

@@ -894,8 +894,10 @@ body {
   justify-content: center;
   z-index: 1000;
   animation: slide-in 0.2s ease-out;
-  padding: 16px;
-  overflow: hidden;
+  padding: clamp(8px, 2vw, 16px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
   isolation: isolate;
   contain: layout paint style;
 }
@@ -904,10 +906,11 @@ body {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 14px;
+  box-sizing: border-box;
   padding: 24px;
   width: 100%;
   max-width: 480px;
-  max-height: calc(100vh - 32px);
+  max-height: calc(100dvh - 16px);
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
@@ -921,6 +924,8 @@ body {
   position: relative;
   width: 100%;
   max-width: 480px;
+  min-width: 0;
+  max-height: calc(100dvh - 16px);
   --modal-close-size: 28px;
 }
 
@@ -936,7 +941,7 @@ body {
 .modal-wide {
   width: 100%;
   max-width: none;
-  max-height: calc(100dvh - 32px);
+  max-height: calc(100dvh - 16px);
   box-sizing: border-box;
 }
 
@@ -995,8 +1000,29 @@ body {
 }
 
 @media (max-width: 640px) {
+  .modal-overlay {
+    align-items: flex-start;
+    padding: max(8px, env(safe-area-inset-top))
+      max(8px, env(safe-area-inset-right))
+      max(8px, env(safe-area-inset-bottom))
+      max(8px, env(safe-area-inset-left));
+  }
+
+  .modal-shell {
+    max-width: none;
+    max-height: calc(100dvh - 16px);
+  }
+
+  .modal {
+    max-height: calc(100dvh - 16px);
+    padding: 20px !important;
+  }
+
   .modal-overlay-wide {
-    padding: 8px;
+    padding: max(8px, env(safe-area-inset-top))
+      max(8px, env(safe-area-inset-right))
+      max(8px, env(safe-area-inset-bottom))
+      max(8px, env(safe-area-inset-left));
   }
 
   .modal-shell-wide {
@@ -1004,8 +1030,8 @@ body {
   }
 
   .modal-wide {
-    padding: 20px;
-    max-height: calc(100dvh - 32px);
+    padding: 20px !important;
+    max-height: calc(100dvh - 16px);
   }
 
   .modal-close {
@@ -1106,4 +1132,3 @@ body {
   opacity: 1;
   transform: translateX(-50%) translateY(0);
 }
-

src/app/networks/page.tsx

@@ -426,18 +426,7 @@ function NetworkDetailsModal({
   ];
 
   return (
-    <div
-      style={{
-        position: "fixed",
-        inset: 0,
-        background: "rgba(0,0,0,0.72)",
-        zIndex: 1000,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: 16,
-      }}
-    >
+    <div className="modal-overlay">
       <div className="modal-shell" style={{ maxWidth: 1040 }}>
         <button
           type="button"
@@ -1591,3 +1580,5 @@ export default function NetworksPage() {
     </DashboardLayout>
   );
 }
+
+

src/app/s3-storage/components/S3StorageSettingsPanel.tsx

@@ -160,8 +160,8 @@ function getDestinationSummary(destination: DestinationDraft) {
   }
 
   return parts.length > 0
-    ? parts.join(" • ")
-    : "Bucket dan region belum lengkap";
+    ? parts.join(" • ")
+    : "Bucket and region are incomplete";
 }
 
 function StatusButton({
@@ -604,11 +604,8 @@ export default function S3StorageSettingsPanel({
       </div>
 
       {draft ? (
-        <div className="modal-overlay">
-          <div
-            className="modal-shell"
-            style={{ width: "min(780px, calc(100% - 48px))", maxWidth: 1100 }}
-          >
+        <div className="modal-overlay modal-overlay-wide">
+          <div className="modal-shell modal-shell-wide">
             <button
               type="button"
               onClick={closeModal}
@@ -1284,4 +1281,3 @@ export default function S3StorageSettingsPanel({
     </>
   );
 }
-

src/app/servers/components/server-config/ServerConfigWebServerPanel.tsx

@@ -174,8 +174,9 @@ export default function ServerConfigWebServerPanel({
     <div style={{ display: "grid", gap: 16 }}>
       {activeIssueDetail && typeof document !== "undefined"
         ? createPortal(
-            <div className="server-config-issue-overlay">
-              <div className="card server-config-issue-dialog">
+            <div className="modal-overlay server-config-issue-overlay">
+              <div className="modal-shell" style={{ maxWidth: 520 }}>
+                <div className="modal server-config-issue-dialog">
                 <div className="server-config-issue-dialog-header">
                   <div>
                     <strong
@@ -211,6 +212,7 @@ export default function ServerConfigWebServerPanel({
                     </div>
                   ))}
                 </div>
+                </div>
               </div>
             </div>,
             document.body,
@@ -457,3 +459,5 @@ export default function ServerConfigWebServerPanel({
     </div>
   );
 }
+
+

src/app/servers/page.tsx

@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
@@ -444,19 +444,7 @@ export default function ServersPage() {
         }}
       />
       {deleteTarget ? (
-        <div
-          style={{
-            position: "fixed",
-            inset: 0,
-            background: "rgba(2, 6, 23, 0.68)",
-            backdropFilter: "blur(6px)",
-            zIndex: 130,
-            display: "grid",
-            placeItems: "center",
-            padding: 20,
-          }}
-          onClick={closeDeleteModal}
-        >
+        <div className="modal-overlay" onClick={closeDeleteModal}>
           <div
             className="modal-shell"
             style={{
@@ -477,7 +465,7 @@ export default function ServersPage() {
               </button>
             ) : null}
             <div
-              className="card"
+              className="modal animate-slide-in"
               style={{
                 padding: 0,
                 overflow: "hidden",
@@ -757,3 +745,5 @@ export default function ServersPage() {
     </DashboardLayout>
   );
 }
+
+

src/components/IssueDetailsSummary.tsx

@@ -43,8 +43,9 @@ export default function IssueDetailsSummary({
 
       {detailOpen && typeof document !== "undefined"
         ? createPortal(
-            <div className="server-config-issue-overlay">
-              <div className="card server-config-issue-dialog">
+            <div className="modal-overlay server-config-issue-overlay">
+              <div className="modal-shell" style={{ maxWidth: 520 }}>
+                <div className="modal server-config-issue-dialog">
                 <div className="server-config-issue-dialog-header">
                   <div>
                     <strong
@@ -82,6 +83,7 @@ export default function IssueDetailsSummary({
                     </div>
                   ))}
                 </div>
+                </div>
               </div>
             </div>,
             document.body,
@@ -90,3 +92,5 @@ export default function IssueDetailsSummary({
     </>
   );
 }
+
+

src/components/ProcessLogsModal.tsx

@@ -220,23 +220,24 @@ export default function ProcessLogsModal({
       className="modal-overlay"
       onClick={closeOnOverlayClick ? handleClose : undefined}
     >
-      <div
-        className="modal animate-slide-in"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="process-logs-modal-title"
-        style={{
-          width: "min(100%, 620px)",
-          maxWidth: 620,
-          padding: 0,
-          overflow: "hidden",
-          maxHeight: "92vh",
-          display: "flex",
-          flexDirection: "column",
-          borderRadius: 18,
-        }}
-        onClick={(event) => event.stopPropagation()}
-      >
+      <div className="modal-shell" style={{ maxWidth: 620 }}>
+        <div
+          className="modal animate-slide-in"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="process-logs-modal-title"
+          style={{
+            width: "100%",
+            maxWidth: 620,
+            padding: 0,
+            overflow: "hidden",
+            maxHeight: "92vh",
+            display: "flex",
+            flexDirection: "column",
+            borderRadius: 18,
+          }}
+          onClick={(event) => event.stopPropagation()}
+        >
         <div
           style={{
             display: "flex",
@@ -558,7 +559,10 @@ export default function ProcessLogsModal({
             </pre>
           )}
         </div>
+        </div>
       </div>
     </div>
   );
 }
+
+