Improve sidebar collapse and add responsive table handling
Sidebar collapse improvements: - Remove gap when sidebar is collapsed - Hide sidebar content completely when collapsed - Make expand button compact (vertical text) Table responsive improvements: - Add breakpoints for 1200-1599px and 1000-1199px ranges - Hide less important columns progressively as screen shrinks - Ensure table doesn't overflow container with overflow-x: auto - Reduce padding and font size on smaller screens Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -520,8 +520,8 @@ h1 {
|
|||||||
|
|
||||||
/* ===== INTERMEDIATE RESPONSIVE BREAKPOINTS ===== */
|
/* ===== INTERMEDIATE RESPONSIVE BREAKPOINTS ===== */
|
||||||
|
|
||||||
/* Large desktop (1200px+) */
|
/* Extra large desktop (1600px+) */
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1600px) {
|
||||||
.dashboard-layout {
|
.dashboard-layout {
|
||||||
max-width: 1800px;
|
max-width: 1800px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@@ -536,8 +536,76 @@ h1 {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Medium desktop (900px - 1199px) */
|
/* Large desktop (1200px - 1599px) - Hide some columns to fit */
|
||||||
@media (min-width: 900px) and (max-width: 1199px) {
|
@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 {
|
.stats-widgets .stats-row {
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
}
|
}
|
||||||
@@ -552,6 +620,32 @@ h1 {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: flex-start;
|
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) */
|
/* Tablet landscape (600px - 899px) */
|
||||||
@@ -2334,16 +2428,34 @@ input[type="checkbox"]:checked {
|
|||||||
.dashboard-sidebar.collapsed {
|
.dashboard-sidebar.collapsed {
|
||||||
width: 0;
|
width: 0;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-sidebar.collapsed .sidebar-content,
|
.dashboard-sidebar.collapsed .sidebar-content,
|
||||||
.dashboard-sidebar.collapsed .sidebar-collapse-btn {
|
.dashboard-sidebar.collapsed .sidebar-collapse-btn {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove gap when sidebar is collapsed */
|
||||||
|
.dashboard-layout.sidebar-collapsed {
|
||||||
|
gap: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-layout.sidebar-collapsed .sidebar-expand-btn {
|
.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 */
|
/* Hide collapse controls on mobile */
|
||||||
@@ -2357,6 +2469,19 @@ input[type="checkbox"]:checked {
|
|||||||
.dashboard-main {
|
.dashboard-main {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
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 */
|
/* Mobile: Stack sidebar above content */
|
||||||
|
|||||||
Reference in New Issue
Block a user