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

Make dashboard table horizontally scrollable at smaller screen widths

Browse Source 
- Set .table-wrapper to overflow-x: auto with touch scrolling support
- Add min-width: 900px to table to trigger scroll before columns collapse
- Set .ascii-frame-outer overflow-x: visible to avoid clipping conflict

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-03-20 10:35:45 -04:00
parent 021c01b3d4
commit d8220da1e0
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
assets/css/dashboard.css
View File

@@ -2644,14 +2644,15 @@ input[type="checkbox"]:checked {
overflow-x: hidden; overflow-x: hidden;
} }
/* Ensure table doesn't overflow container */ /* Ensure frame doesn't overflow — scrolling handled by .table-wrapper */
.dashboard-main .ascii-frame-outer { .dashboard-main .ascii-frame-outer {
max-width: 100%; max-width: 100%;
overflow-x: auto; overflow-x: visible;
} }
.dashboard-main table { .dashboard-main table {
width: 100%; width: 100%;
min-width: 900px; /* trigger scroll before columns collapse */
table-layout: auto; table-layout: auto;
} }
@@ -4643,11 +4644,14 @@ table td:nth-child(4) {
/* ===== ENHANCED MOBILE RESPONSIVE STYLES ===== */ /* ===== ENHANCED MOBILE RESPONSIVE STYLES ===== */
/* Table wrapper - no horizontal scrolling, content wraps */ /* Table wrapper - horizontal scroll when table overflows container */
.table-wrapper { .table-wrapper {
overflow-x: visible; overflow-x: auto;
margin: 0 -0.5rem; overflow-y: visible;
padding: 0 0.5rem; margin: 0;
padding: 0;
/* Subtle scroll hint via gradient on right edge */
-webkit-overflow-scrolling: touch;
} }
@media (max-width: 768px) { @media (max-width: 768px) {