fix(ui): make modals safer on small screens

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}

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;