LotusGuild/tinker_tickets
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Improve sidebar collapse and add responsive table handling

Browse Source 
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:
Jared Vititoe
2026-01-31 11:28:31 -05:00
parent df367b9914
commit 99a96544cf
1 changed files with 130 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
assets/css/dashboard.css
View File

@@ -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 */