feat: implement comprehensive mobile responsive design system and fix horizontal clipping across all viewport sizes

2026-09-02 15:54:19 -07:00
parent 8fcc825d3b
commit 9e4893c9f9
4 changed files with 976 additions and 119 deletions
@@ -246,6 +246,40 @@
      color: #64748b;
    }

+    /* Screen Responsive Styles */
+    @media screen and (max-width: 860px) {
+      .sheet {
+        width: 95%;
+        max-width: 100%;
+        min-height: auto;
+        margin: 16px auto;
+        padding: 24px 18px;
+      }
+      .sheet-header {
+        flex-direction: column;
+        text-align: center;
+        gap: 14px;
+      }
+      .mission-board-badge {
+        text-align: center;
+        width: 100%;
+      }
+      .sheet-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+      }
+      .no-print-bar {
+        padding: 10px 14px;
+        flex-direction: column;
+        gap: 10px;
+        text-align: center;
+      }
+      .no-print-bar a, .no-print-bar .btn-print {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+
    /* Print styles */
    @media print {
      body {