From d8220da1e0bd9f6cc199b750b8c38b4bdfb9dd49 Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Fri, 20 Mar 2026 10:35:45 -0400 Subject: [PATCH] Make dashboard table horizontally scrollable at smaller screen widths - 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 --- assets/css/dashboard.css | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index e91ea0d..c88dc08 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -2644,14 +2644,15 @@ input[type="checkbox"]:checked { overflow-x: hidden; } -/* Ensure table doesn't overflow container */ +/* Ensure frame doesn't overflow — scrolling handled by .table-wrapper */ .dashboard-main .ascii-frame-outer { max-width: 100%; - overflow-x: auto; + overflow-x: visible; } .dashboard-main table { width: 100%; + min-width: 900px; /* trigger scroll before columns collapse */ table-layout: auto; } @@ -4643,11 +4644,14 @@ table td:nth-child(4) { /* ===== ENHANCED MOBILE RESPONSIVE STYLES ===== */ -/* Table wrapper - no horizontal scrolling, content wraps */ +/* Table wrapper - horizontal scroll when table overflows container */ .table-wrapper { - overflow-x: visible; - margin: 0 -0.5rem; - padding: 0 0.5rem; + overflow-x: auto; + overflow-y: visible; + margin: 0; + padding: 0; + /* Subtle scroll hint via gradient on right edge */ + -webkit-overflow-scrolling: touch; } @media (max-width: 768px) {