refactor(ui): standardize modal responsive layout

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