Fix mobile bottom nav sizing and improve ticket view on mobile

Mobile bottom nav:
- Consistent sizing for icons (1.1rem) and text (0.7rem)
- Added .nav-label class for text labels
- Increased height to 64px for better touch targets
- Added active state styling

Ticket view mobile improvements:
- Full width container (removed margins, no side borders)
- Wider tab content areas with proper padding
- Tabs now fill available width
- Active tab has bottom border indicator
- Description textarea full width with proper sizing
- Markdown preview with better font sizing
- Improved comment form styling

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

assets/css/dashboard.css

@@ -5700,7 +5700,7 @@ table td:nth-child(4) {
         bottom: 0;
         left: 0;
         right: 0;
-        height: 60px;
+        height: 64px;
         background: var(--bg-primary);
         border-top: 2px solid var(--terminal-green);
         z-index: var(--z-dropdown);
@@ -5714,18 +5714,27 @@ table td:nth-child(4) {
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        gap: 0.25rem;
+        gap: 0.15rem;
         background: transparent;
         border: none;
         color: var(--terminal-green);
         text-decoration: none;
-        font-size: 0.65rem;
+        font-size: 0.7rem;
         font-family: var(--font-mono);
-        padding: 0.5rem;
+        padding: 0.5rem 0.25rem;
+        min-height: 64px;
     }
 
     .mobile-bottom-nav .nav-icon {
-        font-size: 1.25rem;
+        font-size: 1.1rem;
+        line-height: 1;
+    }
+
+    .mobile-bottom-nav .nav-label {
+        font-size: 0.7rem;
+        line-height: 1;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
     }
 
     .mobile-bottom-nav a:active,
@@ -5733,6 +5742,12 @@ table td:nth-child(4) {
         background: rgba(0, 255, 65, 0.2);
     }
 
+    .mobile-bottom-nav a.active,
+    .mobile-bottom-nav button.active {
+        color: var(--terminal-amber);
+        text-shadow: var(--glow-amber);
+    }
+
     /* ===== HIDE PREVIEW POPUP ON MOBILE ===== */
     .ticket-preview-popup {
         display: none !important;

assets/css/ticket.css

@@ -2258,23 +2258,27 @@ body.dark-mode .editable {
         align-items: center;
     }
 
-    /* Ticket container */
+    /* Ticket container - full width on mobile */
     .ticket-container {
-        margin: 0.5rem;
+        width: 100%;
+        margin: 0;
         border-width: 2px;
+        border-left: none;
+        border-right: none;
     }
 
     .ascii-section-header {
-        font-size: 0.9rem;
+        font-size: 1rem;
-        padding: 0.5rem 0.75rem;
+        padding: 0.75rem 1rem;
     }
 
     .ascii-content {
-        padding: 0.5rem;
+        padding: 0;
     }
 
     .ascii-frame-inner {
-        padding: 0.75rem;
+        padding: 1rem;
+        border: none;
     }
 
     /* Better ticket header layout */
@@ -2371,33 +2375,97 @@ body.dark-mode .editable {
         word-break: break-word;
     }
 
-    /* Better tabs on mobile */
+    /* Better tabs on mobile - equal width, scrollable */
     .ticket-tabs {
         display: flex;
         flex-wrap: nowrap;
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
         gap: 0;
+        background: var(--bg-primary);
+        border-bottom: 2px solid var(--terminal-green);
     }
 
     .tab-btn {
-        flex: 0 0 auto;
+        flex: 1 0 auto;
-        min-width: 100px;
+        min-width: 80px;
-        padding: 0.75rem 1rem;
+        padding: 1rem 0.75rem;
         white-space: nowrap;
-        min-height: 48px;
+        min-height: 52px;
+        font-size: 0.85rem;
+        border: none;
+        border-bottom: 3px solid transparent;
     }
 
-    /* Description and comment sections */
+    .tab-btn.active {
+        border-bottom-color: var(--terminal-amber);
+        background: rgba(255, 176, 0, 0.1);
+    }
+
+    /* Tab content areas - full width */
+    .tab-content {
+        padding: 0;
+    }
+
+    .tab-content.active {
+        display: block;
+    }
+
+    /* Description section */
     .ticket-description,
-    .comments-section {
+    #description-tab {
         padding: 1rem;
+        width: 100%;
+    }
+
+    /* Comments section */
+    .comments-section,
+    #comments-tab {
+        padding: 1rem;
+        width: 100%;
+    }
+
+    /* Dependencies section */
+    #dependencies-tab {
+        padding: 1rem;
+    }
+
+    /* Files section */
+    #files-tab {
+        padding: 1rem;
+    }
+
+    /* Activity section */
+    #activity-tab {
+        padding: 1rem;
+    }
+
+    /* Description textarea - full width */
+    .editable,
+    textarea.editable,
+    #ticketDescription {
+        width: 100% !important;
+        min-height: 200px;
+        padding: 1rem;
+        font-size: 16px !important;
+        line-height: 1.6;
+        border: 2px solid var(--terminal-green);
+    }
+
+    /* Markdown preview */
+    .markdown-preview,
+    #markdownPreview {
+        padding: 1rem;
+        font-size: 1rem;
+        line-height: 1.6;
     }
 
     /* Better comment input */
     .comment-form textarea {
+        width: 100%;
         min-height: 120px;
         font-size: 16px;
+        padding: 1rem;
     }
 
     .comment-form .btn {
@@ -2411,12 +2479,15 @@ body.dark-mode .editable {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
         flex-wrap: nowrap;
+        padding: 0.5rem;
+        gap: 0.25rem;
     }
 
     .markdown-toolbar button {
         min-width: 44px;
         min-height: 44px;
         flex-shrink: 0;
+        font-size: 1rem;
     }
 
     /* Comment styling */

views/DashboardView.php

@@ -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=20260131c">
+    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260131d">
     <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=20260131c"></script>
+    <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/markdown.js?v=20260131d"></script>
-    <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260131c"></script>
+    <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260131d"></script>
     <script nonce="<?php echo $nonce; ?>">
         // CSRF Token for AJAX requests
         window.CSRF_TOKEN = '<?php echo CsrfMiddleware::getToken(); ?>';

views/TicketView.php

@@ -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=20260131b">
+    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260131d">
-    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css?v=20260131b">
+    <link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css?v=20260131d">
     <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=20260131b"></script>
+    <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/markdown.js?v=20260131d"></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/dashboard.js?v=20260131d"></script>
-    <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ticket.js?v=20260131b"></script>
+    <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ticket.js?v=20260131d"></script>
     <script nonce="<?php echo $nonce; ?>">
     // CSRF Token for AJAX requests
     window.CSRF_TOKEN = '<?php echo CsrfMiddleware::getToken(); ?>';