diff --git a/app/static/styles.css b/app/static/styles.css index 58436d7..8f2ab82 100644 --- a/app/static/styles.css +++ b/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; + } +}