diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index f9ba43e..23c8466 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -520,8 +520,8 @@ h1 { /* ===== INTERMEDIATE RESPONSIVE BREAKPOINTS ===== */ -/* Large desktop (1200px+) */ -@media (min-width: 1200px) { +/* Extra large desktop (1600px+) */ +@media (min-width: 1600px) { .dashboard-layout { max-width: 1800px; margin: 0 auto; @@ -536,8 +536,76 @@ h1 { } } -/* Medium desktop (900px - 1199px) */ -@media (min-width: 900px) and (max-width: 1199px) { +/* Large desktop (1200px - 1599px) - Hide some columns to fit */ +@media (min-width: 1200px) and (max-width: 1599px) { + .dashboard-layout { + max-width: 100%; + padding: 0 0.5rem; + } + + .dashboard-sidebar { + width: 220px; + } + + .stats-widgets .stats-row { + grid-template-columns: repeat(4, 1fr); + } + + table { + font-size: 0.85rem; + } + + th, td { + padding: 8px 10px; + } + + /* Hide less important columns on medium-large screens */ + table th:nth-child(8), + table td:nth-child(8), + table th:nth-child(10), + table td:nth-child(10) { + display: none; + } +} + +/* Medium-large desktop (1000px - 1199px) - Hide more columns */ +@media (min-width: 1000px) and (max-width: 1199px) { + .dashboard-layout { + max-width: 100%; + padding: 0 0.5rem; + } + + .dashboard-sidebar { + width: 200px; + } + + .stats-widgets .stats-row { + grid-template-columns: repeat(3, 1fr); + } + + table { + font-size: 0.8rem; + } + + th, td { + padding: 6px 8px; + } + + /* Hide more columns on medium screens */ + table th:nth-child(5), + table td:nth-child(5), + table th:nth-child(8), + table td:nth-child(8), + table th:nth-child(9), + table td:nth-child(9), + table th:nth-child(10), + table td:nth-child(10) { + display: none; + } +} + +/* Medium desktop (900px - 999px) */ +@media (min-width: 900px) and (max-width: 999px) { .stats-widgets .stats-row { grid-template-columns: repeat(3, 1fr); } @@ -552,6 +620,32 @@ h1 { width: 100%; justify-content: flex-start; } + + .dashboard-sidebar { + width: 180px; + } + + table { + font-size: 0.8rem; + } + + th, td { + padding: 6px 8px; + } + + /* Hide even more columns */ + table th:nth-child(4), + table td:nth-child(4), + table th:nth-child(5), + table td:nth-child(5), + table th:nth-child(8), + table td:nth-child(8), + table th:nth-child(9), + table td:nth-child(9), + table th:nth-child(10), + table td:nth-child(10) { + display: none; + } } /* Tablet landscape (600px - 899px) */ @@ -2334,16 +2428,34 @@ input[type="checkbox"]:checked { .dashboard-sidebar.collapsed { width: 0; min-width: 0; + padding: 0; + margin: 0; + border: none; } .dashboard-sidebar.collapsed .sidebar-content, .dashboard-sidebar.collapsed .sidebar-collapse-btn { opacity: 0; pointer-events: none; + display: none; +} + +/* Remove gap when sidebar is collapsed */ +.dashboard-layout.sidebar-collapsed { + gap: 0; } .dashboard-layout.sidebar-collapsed .sidebar-expand-btn { - display: block; + display: flex; + align-items: center; + justify-content: center; + width: 40px; + min-width: 40px; + height: auto; + padding: 0.5rem; + writing-mode: vertical-rl; + text-orientation: mixed; + flex-shrink: 0; } /* Hide collapse controls on mobile */ @@ -2357,6 +2469,19 @@ input[type="checkbox"]:checked { .dashboard-main { flex: 1; min-width: 0; + max-width: 100%; + overflow-x: hidden; +} + +/* Ensure table doesn't overflow container */ +.dashboard-main .ascii-frame-outer { + max-width: 100%; + overflow-x: auto; +} + +.dashboard-main table { + width: 100%; + table-layout: auto; } /* Mobile: Stack sidebar above content */