From f9ef96a50127347e6a46481d29cbdd75416a7cd4 Mon Sep 17 00:00:00 2001
From: Supra4E8C <tan13318527080@163.com>
Date: Fri, 27 Mar 2026 19:42:54 +0800
Subject: [PATCH] fix(ui): make modals safer on small screens

---
 src/components/ui/Modal.tsx |  2 +-
 src/styles/components.scss  | 44 +++++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 50aab72..6c9563d 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -277,7 +277,7 @@ export function Modal({
       <div
         ref={modalRef}
         className={modalClass}
-        style={{ width }}
+        style={{ width, maxWidth: '100%' }}
         role="dialog"
         aria-modal="true"
         aria-labelledby={title ? titleId : undefined}
diff --git a/src/styles/components.scss b/src/styles/components.scss
index fc7fadb..297eb62 100644
--- a/src/styles/components.scss
+++ b/src/styles/components.scss
@@ -411,6 +411,7 @@ textarea {
   border-radius: $radius-lg;
   border: 1px solid var(--border-color);
   box-shadow: $shadow-lg;
+  max-width: 100%;
   max-height: 90vh;
   overflow: hidden;
   display: flex;
@@ -523,6 +524,49 @@ textarea {
   background: var(--bg-primary);
 }
 
+@media (max-width: $breakpoint-mobile) {
+  .modal-overlay {
+    padding: $spacing-md;
+  }
+
+  .modal {
+    max-height: calc(100vh - #{$spacing-md * 2});
+    border-radius: $radius-md;
+  }
+
+  @supports (height: 100dvh) {
+    .modal {
+      max-height: calc(100dvh - #{$spacing-md * 2});
+    }
+  }
+
+  .modal-header {
+    padding: $spacing-md;
+    padding-right: 52px;
+  }
+
+  .modal-body {
+    padding: $spacing-md;
+    max-height: min(60vh, calc(100vh - 180px));
+  }
+
+  @supports (height: 100dvh) {
+    .modal-body {
+      max-height: min(60dvh, calc(100dvh - 180px));
+    }
+  }
+
+  .modal-footer {
+    padding: $spacing-md;
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+
+  .modal-footer .btn {
+    width: 100%;
+  }
+}
+
 .request-log-modal {
   display: flex;
   flex-direction: column;