style: align modal close button across apps

src/app/projects/[projectId]/environments/[environmentId]/components/import/ImportFromSyncModal.tsx

@@ -126,7 +126,11 @@ export default function ImportFromSyncModal({
       );
       setServerContainers((current) =>
         current.map((item) =>
-          item.id === container.id ? { ...item, environmentId } : item,
+          item.id === container.id
+            ? { ...item, environmentId }
+            : item.environmentId === environmentId
+              ? item
+              : item,
         ),
       );
     } catch (assignError) {
@@ -143,17 +147,29 @@ export default function ImportFromSyncModal({
   return (
     <div className="modal-overlay" onClick={onClose}>
       <div
-        className="modal animate-slide-in"
+        className="modal-shell"
+        style={{ maxWidth: 760 }}
         onClick={(event) => event.stopPropagation()}
+      >
+        <button
+          type="button"
+          onClick={onClose}
+          className="modal-close"
+          aria-label="Close import from sync modal"
+        >
+          <X size={22} />
+        </button>
+      <div
+        className="modal animate-slide-in"
         style={{ width: "100%", maxWidth: 760, padding: 24 }}
       >
         <div
           style={{
             display: "flex",
             alignItems: "flex-start",
-            justifyContent: "space-between",
             gap: 12,
             marginBottom: 16,
+            paddingRight: 36,
           }}
         >
           <div style={{ minWidth: 0 }}>
@@ -178,18 +194,6 @@ export default function ImportFromSyncModal({
               {environmentName}.
             </p>
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            style={{
-              background: "none",
-              border: "none",
-              color: "var(--text-muted)",
-              cursor: "pointer",
-            }}
-          >
-            <X size={18} />
-          </button>
         </div>
 
         <section
@@ -252,7 +256,9 @@ export default function ImportFromSyncModal({
         >
           <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
             <CloudSyncIcon size={14} style={{ color: "var(--text-muted)" }} />
-            <strong style={{ fontSize: 13 }}>Services / Containers</strong>
+            <strong style={{ fontSize: 13 }}>
+              Services / Containers
+            </strong>
           </div>
           <button
             type="button"
@@ -402,7 +408,9 @@ export default function ImportFromSyncModal({
                         className="btn btn-ghost"
                         onClick={() => void handleAssign(container)}
                         disabled={
-                          assigningContainerId !== null || syncing || loading
+                          assigningContainerId !== null ||
+                          syncing ||
+                          loading
                         }
                         style={{
                           color: assignedElsewhere ? "#f59e0b" : "#93c5fd",
@@ -457,6 +465,7 @@ export default function ImportFromSyncModal({
             {error}
           </div>
         ) : null}
+        </div>
       </div>
     </div>
   );

src/app/projects/components/EnvironmentFormModal.tsx

@@ -61,9 +61,22 @@ export default function EnvironmentFormModal({
 
   return (
     <div className="modal-overlay" onClick={submitting ? undefined : onClose}>
+      <div
+        className="modal-shell"
+        style={{ maxWidth: 560 }}
+        onClick={(event) => event.stopPropagation()}
+      >
+        <button
+          type="button"
+          onClick={onClose}
+          disabled={submitting}
+          className="modal-close"
+          aria-label="Close environment modal"
+        >
+          <X size={22} />
+        </button>
       <form
         className="modal animate-slide-in"
-        onClick={(event) => event.stopPropagation()}
         onSubmit={handleSubmit}
         style={{
           width: "100%",
@@ -75,9 +88,9 @@ export default function EnvironmentFormModal({
           style={{
             display: "flex",
             alignItems: "flex-start",
-            justifyContent: "space-between",
             gap: 12,
             marginBottom: 20,
+            paddingRight: 36,
           }}
         >
           <div>
@@ -96,19 +109,6 @@ export default function EnvironmentFormModal({
               Tambahkan environment baru ke project {projectName}.
             </p>
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            disabled={submitting}
-            style={{
-              background: "none",
-              border: "none",
-              color: "var(--text-muted)",
-              cursor: "pointer",
-            }}
-          >
-            <X size={18} />
-          </button>
         </div>
 
         <div style={{ display: "grid", gap: 14 }}>
@@ -250,6 +250,7 @@ export default function EnvironmentFormModal({
           </button>
         </div>
       </form>
+      </div>
     </div>
   );
 }

src/app/projects/components/EnvironmentOpsModal.tsx

@@ -79,9 +79,22 @@ export default function EnvironmentOpsModal({
 
   return (
     <div className="modal-overlay" onClick={submitting ? undefined : onClose}>
+      <div
+        className="modal-shell"
+        style={{ maxWidth: 760 }}
+        onClick={(event) => event.stopPropagation()}
+      >
+        <button
+          type="button"
+          onClick={onClose}
+          disabled={submitting}
+          className="modal-close"
+          aria-label="Close environment detail modal"
+        >
+          <X size={22} />
+        </button>
       <form
         className="modal animate-slide-in"
-        onClick={(event) => event.stopPropagation()}
         onSubmit={handleSubmit}
         style={{ width: "100%", maxWidth: 760, padding: 28 }}
       >
@@ -89,9 +102,9 @@ export default function EnvironmentOpsModal({
           style={{
             display: "flex",
             alignItems: "flex-start",
-            justifyContent: "space-between",
             gap: 12,
             marginBottom: 20,
+            paddingRight: 36,
           }}
         >
           <div>
@@ -110,19 +123,6 @@ export default function EnvironmentOpsModal({
               Informasi dan edit metadata environment.
             </p>
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            disabled={submitting}
-            style={{
-              background: "none",
-              border: "none",
-              color: "var(--text-muted)",
-              cursor: "pointer",
-            }}
-          >
-            <X size={18} />
-          </button>
         </div>
 
         <section
@@ -331,6 +331,7 @@ export default function EnvironmentOpsModal({
           </button>
         </div>
       </form>
+      </div>
     </div>
   );
 }

src/app/projects/components/ProjectFormModal.tsx

@@ -44,23 +44,36 @@ export default function ProjectFormModal({
 
   return (
     <div className="modal-overlay" onClick={submitting ? undefined : onClose}>
-      <form
-        className="modal animate-slide-in"
+      <div
+        className="modal-shell"
+        style={{ maxWidth: 560 }}
         onClick={(event) => event.stopPropagation()}
-        onSubmit={handleSubmit}
-        style={{
-          width: "100%",
-          maxWidth: 560,
-          padding: 28,
-        }}
       >
+        <button
+          type="button"
+          onClick={onClose}
+          disabled={submitting}
+          className="modal-close"
+          aria-label="Close project modal"
+        >
+          <X size={22} />
+        </button>
+        <form
+          className="modal animate-slide-in"
+          onSubmit={handleSubmit}
+          style={{
+            width: "100%",
+            maxWidth: 560,
+            padding: 28,
+          }}
+        >
         <div
           style={{
             display: "flex",
             alignItems: "flex-start",
-            justifyContent: "space-between",
             gap: 12,
             marginBottom: 20,
+            paddingRight: 36,
           }}
         >
           <div>
@@ -82,21 +95,8 @@ export default function ProjectFormModal({
               {isEditing
                 ? "Update project information used across environments and deployments."
                 : "Create a new project to manage your environments and deployments."}
-            </p>
+              </p>
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            disabled={submitting}
-            style={{
-              background: "none",
-              border: "none",
-              color: "var(--text-muted)",
-              cursor: "pointer",
-            }}
-          >
-            <X size={18} />
-          </button>
         </div>
 
         <div style={{ display: "grid", gap: 14, marginBottom: 20 }}>
@@ -195,6 +195,7 @@ export default function ProjectFormModal({
           </button>
         </div>
       </form>
+      </div>
     </div>
   );
 }