fix tam

2026-07-04 20:11:19 +07:00
parent d602e77ed3
commit db745b1bd9
2 changed files with 296 additions and 3 deletions
--- a/management/src/components/WorkspaceSeatingChart.tsx
+++ b/management/src/components/WorkspaceSeatingChart.tsx
@@ -522,10 +522,10 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
        </div>
      ) : (
        // Seating Workspace View
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: '1.5rem', flex: 1, minHeight: 0, overflow: 'hidden' }}>
+        <div className="seating-workspace-grid">
          
          {/* Main Seating Panel */}
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', flex: 1, minHeight: 0, overflow: 'hidden' }}>
+          <div className="seating-workspace-main">
            {/* Toolbar */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '10px' }}>
              <div style={{ display: 'flex', gap: '8px' }}>
@@ -566,7 +566,7 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
          </div>

          {/* Right Panel: Unseated Students list */}
-          <div style={{ borderLeft: '1px solid var(--border-color)', paddingLeft: '1.5rem', display: 'flex', flexDirection: 'column', gap: '1rem', overflow: 'hidden', flex: 1, minHeight: 0 }}>
+          <div className="seating-workspace-sidebar">
            <div>
              <h4 style={{ margin: 0, fontSize: '0.95rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span>Chưa vào chỗ</span>
--- a/management/src/index.css
+++ b/management/src/index.css
@@ -3365,6 +3365,7 @@ input:checked + .slider:before {
@media (max-width: 900px) {
  .learning-stats-row {
    grid-template-columns: repeat(2, 1fr);
+    gap: 0.5rem;
  }

  .learning-toolbar {
@@ -3379,6 +3380,73 @@ input:checked + .slider:before {
  .learning-view-btn {
    flex: 1;
  }
+
+  .learning-search {
+    min-width: 0 !important;
+    width: 100% !important;
+  }
+
+  .learning-toolbar-card {
+    padding: 0.85rem !important;
+    margin-bottom: 0.75rem;
+  }
+
+  .learning-class-grid {
+    grid-template-columns: 1fr !important;
+    gap: 0.85rem;
+  }
+
+  .learning-class-card {
+    padding: 0.85rem;
+  }
+
+  .learning-class-card-head {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .learning-day-filters {
+    gap: 0.3rem;
+  }
+
+  .learning-day-chip {
+    padding: 0.22rem 0.5rem;
+    font-size: 0.72rem;
+  }
+
+  .learning-stat {
+    padding: 0.65rem 0.75rem;
+  }
+
+  .learning-stat-value {
+    font-size: 1.15rem;
+  }
+
+  .learning-stat-label {
+    font-size: 0.7rem;
+  }
+
+  /* Timetable responsive */
+  .learning-tkb-wrap {
+    margin: 0 -0.5rem;
+  }
+
+  .learning-tkb-block {
+    padding: 0.4rem !important;
+    gap: 0.15rem !important;
+  }
+
+  .learning-tkb-block-code {
+    font-size: 0.65rem !important;
+  }
+
+  .learning-tkb-block-course {
+    font-size: 0.6rem !important;
+  }
+
+  .learning-tkb-block-time {
+    font-size: 0.55rem !important;
+  }
 }

 /* ── Login ── */
@@ -5528,3 +5596,228 @@ input:checked + .slider:before {
  pointer-events: none;
 }

+/* ── Seating Workspace Layout ── */
+.seating-workspace-grid {
+  display: grid;
+  grid-template-columns: 1fr 300px;
+  gap: 1.5rem;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.seating-workspace-main {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.seating-workspace-sidebar {
+  border-left: 1px solid var(--border-color);
+  padding-left: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow: hidden;
+  flex: 1;
+  min-height: 0;
+}
+
+/* ── Mobile Layout Optimizations for Tables & Control Bars (max-width: 768px) ── */
+@media (max-width: 768px) {
+  /* Seating workspace responsive */
+  .seating-workspace-grid {
+    grid-template-columns: 1fr !important;
+    overflow-y: auto !important;
+  }
+  .seating-workspace-sidebar {
+    border-left: none !important;
+    padding-left: 0 !important;
+    border-top: 1px solid var(--border-color) !important;
+    padding-top: 1.5rem !important;
+    margin-top: 1rem !important;
+    min-height: 350px !important;
+    overflow: visible !important;
+  }
+  .seating-workspace-main {
+    overflow: visible !important;
+  }
+
+  /* Control bar: stack inputs and make them full width */
+  .control-bar {
+    flex-direction: column;
+    align-items: stretch !important;
+    padding: 0.85rem 1rem !important;
+    gap: 0.85rem !important;
+  }
+
+  .search-input-wrapper {
+    max-width: 100% !important;
+    width: 100% !important;
+  }
+
+  .filters-wrapper {
+    width: 100% !important;
+    flex-direction: column;
+    align-items: stretch !important;
+    gap: 0.75rem !important;
+  }
+
+  .select-filter {
+    width: 100% !important;
+  }
+
+  /* Table-to-card transformation for mobile screens */
+  .table-wrapper {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    overflow: visible !important;
+  }
+
+  .data-table {
+    display: block;
+    width: 100%;
+  }
+
+  .data-table thead {
+    display: none; /* Hide headings */
+  }
+
+  .data-table tbody,
+  .data-table tr,
+  .data-table td {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .data-table tr {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    box-shadow: var(--shadow-sm);
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .data-table tr:hover {
+    background-color: var(--bg-card) !important;
+  }
+
+  .data-table td {
+    padding: 0 !important;
+    border: none !important;
+    font-size: 0.875rem;
+    text-align: left !important;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.2rem;
+  }
+
+  /* Distinguish action columns at the bottom of the card */
+  .data-table td:last-child {
+    margin-top: 0.5rem;
+    padding-top: 0.5rem !important;
+    border-top: 1px dashed var(--border-color) !important;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .data-table td .btn {
+    width: 100% !important;
+    justify-content: center !important;
+  }
+
+  /* Pagination stack */
+  .pagination-row {
+    flex-direction: column !important;
+    gap: 0.85rem !important;
+    align-items: center !important;
+    text-align: center !important;
+    padding: 1rem 0;
+  }
+  
+  .page-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+  }
+  
+  .page-header .btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  /* Compact content cards */
+  .content-card {
+    padding: 1rem !important;
+  }
+
+  /* Smaller page title */
+  .page-title h1 {
+    font-size: 1.3rem !important;
+  }
+
+  .page-title p {
+    font-size: 0.82rem !important;
+  }
+
+  /* Stats cards: 2 columns on mobile */
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr) !important;
+    gap: 0.65rem !important;
+  }
+
+  .stat-card {
+    padding: 0.85rem 1rem !important;
+  }
+
+  .stat-value {
+    font-size: 1.4rem !important;
+  }
+
+  /* System page sub-navigation */
+  .system-subnav {
+    grid-template-columns: 1fr !important;
+    gap: 0.5rem !important;
+  }
+
+  /* Prevent horizontal overflow everywhere */
+  .tab-page,
+  .tab-page-body,
+  .tab-page-toolbar,
+  .tab-page-scroll {
+    max-width: 100vw;
+    overflow-x: hidden;
+  }
+
+  /* Exams grid on mobile */
+  .exams-card-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  /* Override excessive page horizontal padding on mobile */
+  .tab-page > div[style*="padding"],
+  .tab-page > .tab-page-body {
+    padding-left: 0.85rem !important;
+    padding-right: 0.85rem !important;
+  }
+
+  /* Modal responsive behavior */
+  .modal-overlay {
+    padding: 0.75rem !important;
+  }
+  .modal-container {
+    max-height: 90vh !important;
+  }
+}
+