fix ui

management/src/components/AttendancePanel.tsx

@@ -236,8 +236,7 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
         </button>
       </div>
 
-      {!isCollapsed && (
+      <div className={`attendance-collapsible-wrapper ${isCollapsed ? 'collapsed' : ''}`}>
-        <>
         <div
           className={`attendance-qldt-banner${
             qldtSynced ? (qldtDirty ? ' attendance-qldt-banner--stale' : ' attendance-qldt-banner--synced') : ''
@@ -292,15 +291,14 @@ export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) =>
           </span>
         </div>
 
-          <p className="schedule-hint" style={{ margin: '0 0 8px 0' }}>
+        <p className="schedule-hint" style={{ margin: '0 0 4px 0' }}>
           Sửa trạng thái thủ công sẽ được khóa — hệ thống tự tính sẽ không ghi đè.
         </p>
 
-          <div style={{ padding: '0.65rem 0.85rem', background: '#fef3c7', border: '1px solid #fcd34d', borderRadius: '4px', color: '#92400e', fontSize: '0.82rem', display: 'flex', alignItems: 'center', gap: '0.35rem', margin: '4px 0 10px 0', lineHeight: '1.4' }}>
+        <div style={{ padding: '0.65rem 0.85rem', background: '#fef3c7', border: '1px solid #fcd34d', borderRadius: '4px', color: '#92400e', fontSize: '0.82rem', display: 'flex', alignItems: 'center', gap: '0.35rem', margin: '4px 0 4px 0', lineHeight: '1.4' }}>
           💡 <strong>Lưu ý:</strong> Hệ thống hiện tại chỉ ghi nhận điểm danh học tập nội bộ và <strong>KHÔNG tự động lưu lên QLĐT</strong>. Thầy cô vui lòng kiểm tra kỹ trạng thái của sinh viên, sau đó bấm nút <strong>Đẩy QLĐT</strong> ở góc phải bên trên để đồng bộ điểm danh chính thức.
         </div>
-        </>
+      </div>
-      )}
 
       {selectedStudentRkIds.length > 0 && (
         <div className="attendance-bulk-actions">

management/src/index.css

@@ -4653,10 +4653,13 @@ input:checked + .slider:before {
   }
 }
 
-/* ── System management ── */
 .system-page {
-  overflow-y: auto;
+  display: flex;
-  padding-bottom: 1.5rem;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding-bottom: 1rem;
 }
 
 .system-subnav {
@@ -4728,20 +4731,30 @@ input:checked + .slider:before {
 }
 
 .system-panel {
-  min-height: 200px;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .system-section {
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .system-section--grid {
   display: grid;
   grid-template-columns: 1fr 280px;
   gap: 1rem;
-  align-items: start;
+  align-items: stretch;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .system-block {
@@ -4750,6 +4763,9 @@ input:checked + .slider:before {
   border-radius: var(--radius-md);
   padding: 1.15rem 1.25rem;
   box-shadow: var(--shadow-sm);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 
 .system-block--info {
@@ -4825,6 +4841,9 @@ input:checked + .slider:before {
   display: flex;
   flex-direction: column;
   gap: 0.45rem;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
 }
 
 .system-domain-item {
@@ -4890,7 +4909,10 @@ input:checked + .slider:before {
 
 .system-table-wrap {
   overflow-x: auto;
+  overflow-y: auto;
   margin-bottom: 0.75rem;
+  flex: 1;
+  min-height: 0;
 }
 
 .template-grid {
@@ -5414,3 +5436,21 @@ input:checked + .slider:before {
   margin-bottom: 0.75rem;
 }
 
+.attendance-collapsible-wrapper {
+  max-height: 500px;
+  opacity: 1;
+  overflow: hidden;
+  transition: max-height 0.3s ease-in-out, opacity 0.25s ease-in-out, margin 0.3s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.attendance-collapsible-wrapper.collapsed {
+  max-height: 0;
+  opacity: 0;
+  margin: 0 !important;
+  padding: 0 !important;
+  pointer-events: none;
+}
+