feat: improve admin responsive pages and teacher candidates

apps/admin/src/index.css

@@ -4,7 +4,15 @@
   box-sizing: border-box;
 }
 
+html {
+  min-width: 320px;
+  background: #f5f5f7;
+}
+
 body {
+  min-width: 320px;
+  overflow-x: hidden;
+  background: #f5f5f7;
   font-family:
     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -15,10 +23,55 @@ body {
   min-height: 100vh;
 }
 
+img,
+svg,
+canvas {
+  max-width: 100%;
+}
+
+.app-shell,
+.app-main,
+.app-content {
+  min-width: 0;
+}
+
+.app-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+/* Shared responsive toolbar: add these classes to page filter/action rows. */
+.responsive-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.responsive-toolbar__group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.ant-drawer-content-wrapper {
+  max-width: 100vw !important;
+}
+
+.ant-pagination {
+  row-gap: 8px;
+}
+
 /* === 通用：表格容器横向滚动（防双重滚动条） === */
 .ant-table-wrapper {
+  max-width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+  -webkit-overflow-scrolling: touch;
 }
 
 /* ── 表格单元格省略号截断（按需启用） ──
@@ -54,6 +107,65 @@ body {
 
 /* === 手机 (< 576px) === */
 @media (max-width: 575px) {
+  .app-header {
+    height: 56px;
+    padding-inline: 8px !important;
+    line-height: 56px;
+  }
+
+  .app-header .ant-btn {
+    width: 40px;
+    min-height: 40px;
+    padding-inline: 0;
+  }
+
+  .app-content {
+    min-height: calc(100dvh - 72px);
+    margin: 8px !important;
+    padding: 12px !important;
+    border-radius: 10px !important;
+  }
+
+  .app-navigation-drawer .ant-drawer-header {
+    padding-inline: 16px;
+  }
+
+  .responsive-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+    margin-bottom: 12px;
+  }
+
+  .responsive-toolbar__group,
+  .responsive-toolbar > .ant-space {
+    width: 100%;
+  }
+
+  .responsive-toolbar__group > .ant-space-item,
+  .responsive-toolbar > .ant-space > .ant-space-item {
+    flex: 1 1 140px;
+    max-width: 100%;
+  }
+
+  .responsive-toolbar .ant-input,
+  .responsive-toolbar .ant-input-affix-wrapper,
+  .responsive-toolbar .ant-input-search,
+  .responsive-toolbar .ant-picker,
+  .responsive-toolbar .ant-select,
+  .responsive-toolbar .ant-upload,
+  .responsive-toolbar .ant-upload-wrapper,
+  .responsive-toolbar .ant-btn {
+    width: 100% !important;
+  }
+
+  .ant-btn:not(.ant-btn-sm),
+  .ant-input-affix-wrapper,
+  .ant-input-search-button,
+  .ant-picker,
+  .ant-select-single .ant-select-selector {
+    min-height: 40px;
+  }
+
   .ant-table {
     font-size: 13px;
   }
@@ -65,12 +177,48 @@ body {
     font-size: 13px;
   }
   .ant-modal {
-    max-width: calc(100vw - 24px) !important;
-    margin: 12px auto !important;
+    top: 12px;
+    max-width: calc(100vw - 16px) !important;
+    margin: 0 auto !important;
+    padding-bottom: 12px;
+  }
+  .ant-modal .ant-modal-content {
+    padding: 16px;
   }
   .ant-modal .ant-modal-body {
-    max-height: 60vh;
+    max-height: calc(100dvh - 180px);
     overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+  .ant-modal .ant-modal-footer {
+    display: flex;
+  }
+  .ant-modal .ant-modal-footer .ant-btn {
+    flex: 1;
+    min-height: 40px;
+  }
+  .ant-drawer .ant-drawer-header {
+    padding: 14px 16px;
+  }
+  .ant-drawer .ant-drawer-body {
+    padding: 16px;
+    overscroll-behavior: contain;
+  }
+  .ant-popover,
+  .ant-picker-dropdown {
+    max-width: calc(100vw - 16px);
+  }
+  .ant-pagination {
+    justify-content: center;
+  }
+  .ant-pagination .ant-pagination-options {
+    margin-inline-start: 0;
+  }
+  .ant-alert {
+    padding: 10px 12px;
+  }
+  h1 {
+    font-size: 22px !important;
   }
   h2 {
     font-size: 18px !important;
@@ -78,9 +226,8 @@ body {
   .ant-card {
     margin-bottom: 8px;
   }
-  .ant-space-item .ant-btn {
-    padding: 2px 6px;
-    font-size: 12px;
+  .ant-card .ant-card-body {
+    padding: 14px;
   }
 }
 
@@ -90,3 +237,82 @@ body {
     max-width: calc(100vw - 48px) !important;
   }
 }
+
+.notifications-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.notifications-filter {
+  width: 100%;
+  margin-bottom: 12px;
+}
+
+@media (max-width: 575px) {
+  .notifications-layout,
+  .notifications-content {
+    min-width: 0;
+  }
+
+  .notifications-header {
+    margin-bottom: 12px;
+  }
+
+  .notifications-content .ant-list-item {
+    align-items: flex-start;
+    padding: 14px 6px !important;
+  }
+
+  .notifications-content .ant-list-item-meta-avatar {
+    margin-inline-end: 10px;
+  }
+
+  .notifications-content .ant-list-item-meta-title {
+    margin-bottom: 4px;
+  }
+}
+
+@media (max-width: 575px) {
+  .ant-table-wrapper::before {
+    content: '表格可左右滑动查看';
+    display: block;
+    margin-bottom: 6px;
+    color: #8c8c8c;
+    font-size: 11px;
+    text-align: right;
+  }
+
+  .ant-table-wrapper .ant-table-content {
+    scrollbar-width: thin;
+  }
+
+  .ant-table-wrapper .ant-table-cell-fix-left,
+  .ant-table-wrapper .ant-table-cell-fix-right {
+    box-shadow: 2px 0 5px rgb(0 0 0 / 5%);
+  }
+}
+
+.responsive-toolbar--single {
+  justify-content: flex-start;
+}
+
+@media (max-width: 575px) {
+  /* Input.Search is an internal compact group. Keep the text field flexible and
+     the search icon button fixed instead of applying toolbar full-width rules
+     to both children. */
+  .responsive-toolbar .ant-input-search > .ant-input-affix-wrapper {
+    flex: 1 1 auto;
+    width: auto !important;
+    min-width: 0;
+  }
+
+  .responsive-toolbar .ant-input-search > .ant-input-search-btn {
+    flex: 0 0 40px;
+    width: 40px !important;
+    min-width: 40px;
+    padding-inline: 0;
+  }
+}