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

Remove scrollbars: content wraps and boxes expand to fit

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-01-31 10:36:56 -05:00
parent 2657e86d24
commit 7a6e7ea2b0
4 changed files with 36 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
assets/css/dashboard.css
View File

@@ -1434,6 +1434,8 @@ th, td {
border: 1px solid var(--terminal-green); border: 1px solid var(--terminal-green);
color: var(--terminal-green); color: var(--terminal-green);
font-family: var(--font-mono); font-family: var(--font-mono);
word-wrap: break-word;
overflow-wrap: break-word;
} }
th { th {
@@ -4098,7 +4100,7 @@ tr:hover .quick-actions {
/* ===== TABLE OVERFLOW FIX ===== */ /* ===== TABLE OVERFLOW FIX ===== */
.ascii-content { .ascii-content {
overflow-x: auto; overflow-x: visible;
} }
/* Reduce column widths for better fit */ /* Reduce column widths for better fit */
@@ -4108,11 +4110,12 @@ table td {
font-size: 0.85rem; font-size: 0.85rem;
} }
/* Make title column wrap if needed */ /* Title column wraps to new lines */
table td:nth-child(4) { table td:nth-child(4) {
max-width: 180px; max-width: 250px;
overflow: hidden; word-wrap: break-word;
text-overflow: ellipsis; overflow-wrap: break-word;
white-space: normal;
} }
/* ===== TICKET LINK REFERENCES IN COMMENTS ===== */ /* ===== TICKET LINK REFERENCES IN COMMENTS ===== */
@@ -4271,10 +4274,9 @@ table td:nth-child(4) {
/* ===== ENHANCED MOBILE RESPONSIVE STYLES ===== */ /* ===== ENHANCED MOBILE RESPONSIVE STYLES ===== */
/* Table wrapper for horizontal scrolling */ /* Table wrapper - no horizontal scrolling, content wraps */
.table-wrapper { .table-wrapper {
overflow-x: auto; overflow-x: visible;
-webkit-overflow-scrolling: touch;
margin: 0 -0.5rem; margin: 0 -0.5rem;
padding: 0 0.5rem; padding: 0 0.5rem;
} }
@@ -5040,12 +5042,12 @@ table td:nth-child(4) {
.table-wrapper { .table-wrapper {
width: 100%; width: 100%;
overflow-x: auto; overflow-x: visible;
-webkit-overflow-scrolling: touch;
} }
.table-wrapper table { .table-wrapper table {
min-width: 700px; min-width: auto;
width: 100%;
} }
table { table {
@@ -5055,7 +5057,8 @@ table td:nth-child(4) {
table th, table th,
table td { table td {
padding: 0.75rem 0.5rem; padding: 0.75rem 0.5rem;
white-space: nowrap; white-space: normal;
word-wrap: break-word;
} }
/* Make ticket ID and title columns wider */ /* Make ticket ID and title columns wider */

22
assets/css/ticket.css
View File

@@ -115,9 +115,8 @@
/* Base Layout Components - TERMINAL STYLE */ /* Base Layout Components - TERMINAL STYLE */
.ticket-container { .ticket-container {
width: 90%; width: 90%;
height: auto !important; height: auto;
min-height: 900px !important; min-height: auto;
min-width: 800px;
max-width: 1800px; max-width: 1800px;
margin: 40px auto; margin: 40px auto;
padding: 0; padding: 0;
@@ -128,6 +127,8 @@
transition: border-color 0.3s ease; transition: border-color 0.3s ease;
position: relative; position: relative;
font-family: var(--font-mono); font-family: var(--font-mono);
word-wrap: break-word;
overflow-wrap: break-word;
} }
/* Compatibility with ascii-frame-outer - remove duplicate corners */ /* Compatibility with ascii-frame-outer - remove duplicate corners */
@@ -516,16 +517,19 @@ input.editable {
textarea.editable { textarea.editable {
width: 100%; width: 100%;
min-height: 800px !important; min-height: 200px;
height: auto !important; height: auto;
white-space: pre; white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
font-family: var(--font-mono); font-family: var(--font-mono);
line-height: 1.2; line-height: 1.4;
resize: vertical;
} }
#description-tab { #description-tab {
min-height: 850px !important; min-height: auto;
height: auto !important; height: auto;
padding-bottom: 20px; padding-bottom: 20px;
} }

6
views/DashboardView.php
View File

@@ -12,11 +12,11 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ticket Dashboard</title> <title>Ticket Dashboard</title>
<link rel="icon" type="image/png" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/images/favicon.png"> <link rel="icon" type="image/png" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/images/favicon.png">
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260131a"> <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260131b">
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ascii-banner.js"></script> <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ascii-banner.js"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/toast.js"></script> <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/toast.js"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/markdown.js?v=20260131a"></script> <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/markdown.js?v=20260131b"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260131a"></script> <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260131b"></script>
<script nonce="<?php echo $nonce; ?>"> <script nonce="<?php echo $nonce; ?>">
// CSRF Token for AJAX requests // CSRF Token for AJAX requests
window.CSRF_TOKEN = '<?php echo CsrfMiddleware::getToken(); ?>'; window.CSRF_TOKEN = '<?php echo CsrfMiddleware::getToken(); ?>';

10
views/TicketView.php
View File

@@ -50,12 +50,12 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ticket #<?php echo $ticket['ticket_id']; ?></title> <title>Ticket #<?php echo $ticket['ticket_id']; ?></title>
<link rel="icon" type="image/png" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/images/favicon.png"> <link rel="icon" type="image/png" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/images/favicon.png">
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260131a"> <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260131b">
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css?v=20260131a"> <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css?v=20260131b">
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/toast.js"></script> <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/toast.js"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/markdown.js?v=20260131a"></script> <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/markdown.js?v=20260131b"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260131a"></script> <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260131b"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ticket.js?v=20260131a"></script> <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ticket.js?v=20260131b"></script>
<script nonce="<?php echo $nonce; ?>"> <script nonce="<?php echo $nonce; ?>">
// CSRF Token for AJAX requests // CSRF Token for AJAX requests
window.CSRF_TOKEN = '<?php echo CsrfMiddleware::getToken(); ?>'; window.CSRF_TOKEN = '<?php echo CsrfMiddleware::getToken(); ?>';