fix: Mobile sidebar and ticket page improvements

Dashboard sidebar fixes:
- Added proper styling for sidebar interior on mobile
- Filter groups have touch-friendly labels (44px height)
- Larger checkboxes (22px)
- Full-width apply/clear buttons
- Border separators between filter groups

Ticket page fixes:
- Metadata fields stack vertically on mobile
- Assignment dropdown full-width
- All selects have 48px height and 16px font
- Better spacing throughout
- Sticky header

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

assets/css/dashboard.css

@@ -3951,6 +3951,65 @@ table td:nth-child(4) {
 
     .dashboard-sidebar .sidebar-content {
         display: block;
+        padding-top: 1rem;
+    }
+
+    /* Mobile sidebar interior styling */
+    .dashboard-sidebar .ascii-frame-inner {
+        padding: 1rem !important;
+        border: 2px solid var(--terminal-green) !important;
+        background: var(--bg-secondary) !important;
+    }
+
+    .dashboard-sidebar .ascii-subsection-header {
+        font-size: 1.1rem;
+        margin-bottom: 1rem;
+        padding-bottom: 0.5rem;
+    }
+
+    .dashboard-sidebar .filter-group {
+        margin-bottom: 1.5rem;
+        padding-bottom: 1rem;
+        border-bottom: 1px solid rgba(0, 255, 65, 0.3);
+    }
+
+    .dashboard-sidebar .filter-group:last-of-type {
+        border-bottom: none;
+    }
+
+    .dashboard-sidebar .filter-group h4 {
+        font-size: 0.95rem;
+        margin-bottom: 0.75rem;
+        color: var(--terminal-amber);
+    }
+
+    .dashboard-sidebar .filter-group label {
+        display: flex;
+        align-items: center;
+        padding: 0.75rem 0.5rem;
+        margin: 0.25rem 0;
+        min-height: 44px;
+        font-size: 0.95rem;
+        background: rgba(0, 255, 65, 0.05);
+        border-radius: 4px;
+    }
+
+    .dashboard-sidebar .filter-group label:active {
+        background: rgba(0, 255, 65, 0.15);
+    }
+
+    .dashboard-sidebar .filter-group input[type="checkbox"] {
+        width: 22px;
+        height: 22px;
+        margin-right: 0.75rem;
+        flex-shrink: 0;
+    }
+
+    .dashboard-sidebar .btn {
+        width: 100%;
+        min-height: 48px;
+        margin-top: 0.5rem;
+        font-size: 1rem;
     }
 
     /* Mobile sidebar overlay */

assets/css/ticket.css

@@ -1620,66 +1620,141 @@ body.dark-mode .editable {
         font-size: 16px !important;
     }
 
+    /* Add padding at bottom for potential mobile nav */
+    body {
+        padding-bottom: 70px;
+    }
+
+    /* Better header on mobile */
+    .user-header {
+        position: sticky;
+        top: 0;
+        z-index: 100;
+        padding: 0.5rem 0.75rem;
+    }
+
+    .user-header-right .user-name {
+        display: none;
+    }
+
+    .back-link {
+        font-size: 0.9rem;
+        padding: 0.5rem 0;
+        min-height: 44px;
+        display: inline-flex;
+        align-items: center;
+    }
+
+    /* Ticket container */
+    .ticket-container {
+        margin: 0.5rem;
+        border-width: 2px;
+    }
+
+    .ascii-section-header {
+        font-size: 0.9rem;
+        padding: 0.5rem 0.75rem;
+    }
+
+    .ascii-content {
+        padding: 0.5rem;
+    }
+
+    .ascii-frame-inner {
+        padding: 0.75rem;
+    }
+
     /* Better ticket header layout */
     .ticket-header {
         flex-direction: column;
         align-items: flex-start;
-        gap: 1rem;
-    }
-
-    .ticket-header-left {
-        width: 100%;
-    }
-
-    .ticket-header-right {
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-    }
-
-    .ticket-header-right .btn {
-        flex: 1;
-        min-width: 100px;
-        text-align: center;
-        min-height: 44px;
-    }
-
-    /* Stack ticket metadata vertically */
-    .ticket-meta-grid {
-        display: flex;
-        flex-direction: column;
         gap: 0.75rem;
     }
 
-    .ticket-meta-item {
+    .ticket-header h2 {
+        font-size: 1.1rem;
+        line-height: 1.3;
+        word-break: break-word;
+    }
+
+    .ticket-subheader {
+        width: 100%;
+    }
+
+    /* Ticket metadata fields - stack on mobile */
+    .ticket-metadata-fields {
+        grid-template-columns: 1fr !important;
+        gap: 0.75rem !important;
+    }
+
+    .metadata-field {
         display: flex;
-        justify-content: space-between;
+        flex-direction: column;
-        align-items: center;
+        gap: 0.25rem;
-        padding: 0.5rem 0;
-        border-bottom: 1px solid var(--border-color);
     }
 
-    .ticket-meta-label {
+    .metadata-field label {
-        font-weight: bold;
+        font-size: 0.85rem !important;
-        min-width: 100px;
     }
 
-    .ticket-meta-value {
+    .metadata-field select,
-        text-align: right;
+    .metadata-select {
-        flex: 1;
+        width: 100% !important;
+        min-height: 48px !important;
+        padding: 0.75rem !important;
+        font-size: 16px !important;
     }
 
-    /* Better select dropdowns */
+    /* Assignment select */
-    .ticket-meta-item select {
+    .ticket-assignment {
-        min-height: 44px;
+        display: flex;
-        padding: 0.5rem;
+        flex-direction: column;
-        max-width: 60%;
+        gap: 0.25rem;
+        margin-top: 0.75rem !important;
+    }
+
+    .ticket-assignment label {
+        font-size: 0.85rem;
+    }
+
+    .assignment-select,
+    #assignedToSelect {
+        width: 100% !important;
+        min-height: 48px !important;
+        padding: 0.75rem !important;
+        font-size: 16px !important;
+    }
+
+    /* Ticket user info */
+    .ticket-user-info {
+        font-size: 0.8rem !important;
+        line-height: 1.4;
+    }
+
+    .ticket-id {
+        font-size: 0.85rem;
+        word-break: break-all;
+    }
+
+    /* Status display and select */
+    .status-display,
+    #statusDisplay {
+        display: block;
+        width: 100%;
+        text-align: center;
+        margin: 0.5rem 0;
+    }
+
+    #statusSelect {
+        width: 100%;
+        min-height: 48px;
+        font-size: 16px !important;
     }
 
     /* Full width title on mobile */
-    .ticket-title {
+    .ticket-title,
-        font-size: 1.1rem;
+    .title-input {
+        font-size: 1rem;
         word-break: break-word;
     }
 

views/CreateTicketView.php

@@ -8,9 +8,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Create New Ticket</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=20260124c">
+    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260124d">
-    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css?v=20260124c">
+    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css?v=20260124d">
-    <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260124c"></script>
+    <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260124d"></script>
     <script>
     // CSRF Token for AJAX requests
     window.CSRF_TOKEN = '<?php

views/DashboardView.php

@@ -9,11 +9,11 @@
     <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=20260124cc">
+    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260124dc">
     <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ascii-banner.js"></script>
     <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/toast.js"></script>
-    <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/markdown.js?v=20260124cc"></script>
+    <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/markdown.js?v=20260124dc"></script>
-    <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260124cc"></script>
+    <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260124dc"></script>
     <script>
         // CSRF Token for AJAX requests
         window.CSRF_TOKEN = '<?php

views/TicketView.php

@@ -46,12 +46,12 @@ function formatDetails($details, $actionType) {
     <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=20260124c">
+    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260124d">
-    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css?v=20260124c">
+    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css?v=20260124d">
     <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/toast.js"></script>
-    <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/markdown.js?v=20260124c"></script>
+    <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/markdown.js?v=20260124d"></script>
-    <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260124c"></script>
+    <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260124d"></script>
-    <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ticket.js?v=20260124c"></script>
+    <script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ticket.js?v=20260124d"></script>
     <script>
     // CSRF Token for AJAX requests
     window.CSRF_TOKEN = '<?php