fix: improve mobile responsive layout

app/app/static/styles.css

@@ -17,6 +17,10 @@
   box-sizing: border-box;
 }
 
+html {
+  overflow-x: hidden;
+}
+
 [hidden] {
   display: none !important;
 }
@@ -24,6 +28,7 @@
 body {
   margin: 0;
   min-height: 100vh;
+  overflow-x: hidden;
   background: var(--bg);
   color: var(--text);
   font-family: Arial, "Songti SC", SimSun, sans-serif;
@@ -36,6 +41,10 @@ select {
   font: inherit;
 }
 
+button {
+  touch-action: manipulation;
+}
+
 .topbar {
   position: sticky;
   top: 0;
@@ -72,6 +81,7 @@ h2 {
   margin-top: 6px;
   color: var(--muted);
   font-size: 13px;
+  overflow-wrap: anywhere;
 }
 
 .top-actions {
@@ -79,6 +89,8 @@ h2 {
   align-items: center;
   gap: 10px;
   flex: 0 0 auto;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .nav-button {
@@ -152,15 +164,22 @@ h2 {
   flex-wrap: wrap;
   gap: 8px;
   justify-content: flex-end;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .admin-tabs {
   display: flex;
   gap: 8px;
   padding: 0 0 4px;
+  max-width: 100%;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  -webkit-overflow-scrolling: touch;
 }
 
 .admin-tab {
+  flex: 0 0 auto;
   min-height: 38px;
   padding: 0 14px;
   border: 1px solid var(--line);
@@ -299,6 +318,7 @@ select:focus {
   margin-top: 4px;
   color: var(--muted);
   font-size: 13px;
+  overflow-wrap: anywhere;
 }
 
 .inline-account-grid {
@@ -434,6 +454,10 @@ textarea:focus {
   line-height: 1.45;
 }
 
+.log-detail {
+  max-width: 460px;
+}
+
 .summary-preview {
   display: -webkit-box;
   max-height: 4.35em;
@@ -511,6 +535,8 @@ textarea:focus {
 .table-wrap {
   max-height: calc(100vh - 292px);
   overflow: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
 }
 
 .account-table-wrap {
@@ -519,9 +545,16 @@ textarea:focus {
 
 table {
   width: 100%;
+  min-width: 720px;
   border-collapse: collapse;
 }
 
+.admin-panel table,
+.accounts-panel table,
+.records-panel table {
+  min-width: 820px;
+}
+
 th,
 td {
   padding: 10px 12px;
@@ -757,6 +790,7 @@ td {
   display: flex;
   justify-content: flex-end;
   background: rgba(16, 24, 40, 0.38);
+  overflow: hidden;
 }
 
 .drawer-backdrop[hidden] {
@@ -768,6 +802,7 @@ td {
   flex-direction: column;
   width: min(720px, 100%);
   max-height: 100vh;
+  min-width: 0;
   border-left: 1px solid var(--line);
   background: var(--panel);
   box-shadow: -20px 0 48px rgba(16, 24, 40, 0.2);
@@ -883,6 +918,7 @@ td {
 .correction-modal {
   width: min(100%, 760px);
   max-height: calc(100vh - 36px);
+  min-width: 0;
   overflow: auto;
   border: 1px solid var(--line);
   border-radius: 8px;
@@ -997,6 +1033,14 @@ td {
     grid-template-columns: 1fr;
   }
 
+  .section-head {
+    flex-wrap: wrap;
+  }
+
+  .quick-actions {
+    justify-content: flex-start;
+  }
+
   .table-wrap {
     max-height: none;
   }
@@ -1008,12 +1052,21 @@ td {
   .register-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+
+  .admin-tabs {
+    padding-bottom: 6px;
+  }
 }
 
 @media (max-width: 640px) {
   .topbar {
     align-items: flex-start;
-    padding: 14px;
+    flex-wrap: wrap;
+    padding: 12px 14px;
+  }
+
+  .topbar > div:first-child {
+    flex: 1 1 100%;
   }
 
   h1 {
@@ -1021,7 +1074,7 @@ td {
   }
 
   .layout {
-    padding: 12px;
+    padding: 10px 12px 18px;
   }
 
   .section-head {
@@ -1034,6 +1087,21 @@ td {
     justify-content: flex-start;
   }
 
+  .quick-actions select,
+  .quick-actions .chip {
+    flex: 1 1 auto;
+  }
+
+  .top-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .top-actions .nav-button {
+    min-width: 0;
+    flex: 1 1 0;
+  }
+
   .search-row,
   .search-row.compact,
   .account-search-row,
@@ -1041,6 +1109,20 @@ td {
     grid-template-columns: 1fr;
   }
 
+  .search-row,
+  .section-head,
+  .summary-grid,
+  .inline-account,
+  .admin-form,
+  .correction-toolbar,
+  .drawer-head,
+  .drawer-content,
+  .drawer-actions,
+  .correction-form {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
   .summary-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1073,6 +1155,13 @@ td {
 
   .admin-tabs {
     overflow-x: auto;
+    gap: 6px;
+  }
+
+  .admin-tab {
+    min-height: 36px;
+    padding: 0 12px;
+    white-space: nowrap;
   }
 
   .form-grid {
@@ -1092,11 +1181,13 @@ td {
   }
 
   .drawer-backdrop {
-    padding-left: 0;
+    align-items: stretch;
+    padding: 0;
   }
 
   .summary-review-drawer {
     width: 100%;
+    max-width: 100%;
   }
 
   .drawer-head,
@@ -1118,9 +1209,49 @@ td {
     grid-template-columns: 1fr;
   }
 
+  .inline-account-head {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
   th,
   td {
-    padding: 9px 10px;
+    padding: 8px 9px;
+  }
+
+  th {
+    white-space: nowrap;
+  }
+
+  .summary-time-input {
+    width: 100%;
+    max-width: 160px;
+  }
+
+  .modal-backdrop {
+    padding: 0;
+    place-items: stretch;
+  }
+
+  .correction-modal {
+    width: 100%;
+    max-height: 100vh;
+    border-radius: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+
+  .modal-head {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .modal-close,
+  .secondary-button,
+  .correction-toolbar button,
+  .drawer-actions button,
+  .modal-actions button {
+    width: 100%;
   }
 
   .teacher-group-title {
@@ -1133,3 +1264,41 @@ td {
     white-space: normal;
   }
 }
+
+@media (max-width: 420px) {
+  body {
+    font-size: 14px;
+  }
+
+  h1 {
+    font-size: 18px;
+  }
+
+  h2 {
+    font-size: 16px;
+  }
+
+  .summary-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .metric strong {
+    font-size: 16px;
+  }
+
+  .correction-preview code,
+  .drawer-text,
+  .drawer-body,
+  .summary-body,
+  .log-detail {
+    font-size: 13px;
+  }
+
+  .admin-tabs {
+    gap: 4px;
+  }
+
+  .admin-tab {
+    padding: 0 10px;
+  }
+}