From 7a6e7ea2b097f20f80e07a0e6869d74186095d22 Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Sat, 31 Jan 2026 10:36:56 -0500 Subject: [PATCH] Remove scrollbars: content wraps and boxes expand to fit - Change overflow-x from auto to visible in table wrapper - Allow text wrapping in table cells instead of ellipsis truncation - Remove min-width constraints that forced horizontal scrolling - Change textarea white-space from pre to pre-wrap - Remove fixed min-height on ticket container and description - Update mobile styles to wrap content instead of scroll Co-Authored-By: Claude Opus 4.5 --- assets/css/dashboard.css | 27 +++++++++++++++------------ assets/css/ticket.css | 22 +++++++++++++--------- views/DashboardView.php | 6 +++--- views/TicketView.php | 10 +++++----- 4 files changed, 36 insertions(+), 29 deletions(-) diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index 8484153..b332630 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -1434,6 +1434,8 @@ th, td { border: 1px solid var(--terminal-green); color: var(--terminal-green); font-family: var(--font-mono); + word-wrap: break-word; + overflow-wrap: break-word; } th { @@ -4098,7 +4100,7 @@ tr:hover .quick-actions { /* ===== TABLE OVERFLOW FIX ===== */ .ascii-content { - overflow-x: auto; + overflow-x: visible; } /* Reduce column widths for better fit */ @@ -4108,11 +4110,12 @@ table td { font-size: 0.85rem; } -/* Make title column wrap if needed */ +/* Title column wraps to new lines */ table td:nth-child(4) { - max-width: 180px; - overflow: hidden; - text-overflow: ellipsis; + max-width: 250px; + word-wrap: break-word; + overflow-wrap: break-word; + white-space: normal; } /* ===== TICKET LINK REFERENCES IN COMMENTS ===== */ @@ -4271,10 +4274,9 @@ table td:nth-child(4) { /* ===== ENHANCED MOBILE RESPONSIVE STYLES ===== */ -/* Table wrapper for horizontal scrolling */ +/* Table wrapper - no horizontal scrolling, content wraps */ .table-wrapper { - overflow-x: auto; - -webkit-overflow-scrolling: touch; + overflow-x: visible; margin: 0 -0.5rem; padding: 0 0.5rem; } @@ -5040,12 +5042,12 @@ table td:nth-child(4) { .table-wrapper { width: 100%; - overflow-x: auto; - -webkit-overflow-scrolling: touch; + overflow-x: visible; } .table-wrapper table { - min-width: 700px; + min-width: auto; + width: 100%; } table { @@ -5055,7 +5057,8 @@ table td:nth-child(4) { table th, table td { padding: 0.75rem 0.5rem; - white-space: nowrap; + white-space: normal; + word-wrap: break-word; } /* Make ticket ID and title columns wider */ diff --git a/assets/css/ticket.css b/assets/css/ticket.css index d83a7e4..fef971e 100644 --- a/assets/css/ticket.css +++ b/assets/css/ticket.css @@ -115,9 +115,8 @@ /* Base Layout Components - TERMINAL STYLE */ .ticket-container { width: 90%; - height: auto !important; - min-height: 900px !important; - min-width: 800px; + height: auto; + min-height: auto; max-width: 1800px; margin: 40px auto; padding: 0; @@ -128,6 +127,8 @@ transition: border-color 0.3s ease; position: relative; font-family: var(--font-mono); + word-wrap: break-word; + overflow-wrap: break-word; } /* Compatibility with ascii-frame-outer - remove duplicate corners */ @@ -516,16 +517,19 @@ input.editable { textarea.editable { width: 100%; - min-height: 800px !important; - height: auto !important; - white-space: pre; + min-height: 200px; + height: auto; + white-space: pre-wrap; + word-wrap: break-word; + overflow-wrap: break-word; font-family: var(--font-mono); - line-height: 1.2; + line-height: 1.4; + resize: vertical; } #description-tab { - min-height: 850px !important; - height: auto !important; + min-height: auto; + height: auto; padding-bottom: 20px; } diff --git a/views/DashboardView.php b/views/DashboardView.php index ded9ec3..1a16bf7 100644 --- a/views/DashboardView.php +++ b/views/DashboardView.php @@ -12,11 +12,11 @@ $nonce = SecurityHeadersMiddleware::getNonce(); Ticket Dashboard - + - - + + - - - + + +