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);
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 */

22
assets/css/ticket.css
View File

@@ -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;
}

6
views/DashboardView.php
View File

@@ -12,11 +12,11 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ticket Dashboard</title>
<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/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/dashboard.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=20260131b"></script>
<script nonce="<?php echo $nonce; ?>">
// CSRF Token for AJAX requests
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">
<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="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260131a">
<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/dashboard.css?v=20260131b">
<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/markdown.js?v=20260131a"></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/ticket.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=20260131b"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ticket.js?v=20260131b"></script>
<script nonce="<?php echo $nonce; ?>">
// CSRF Token for AJAX requests
window.CSRF_TOKEN = '<?php echo CsrfMiddleware::getToken(); ?>';