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>
2026-01-31 11:51:02 -05:00
parent cbce4b5fac
commit b0ffc2cdc2
4 changed files with 112 additions and 26 deletions
--- a/assets/css/dashboard.css
+++ b/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;
--- a/assets/css/ticket.css
+++ b/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;
-        padding: 0.5rem 0.75rem;
+        font-size: 1rem;
+        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;
-        min-width: 100px;
-        padding: 0.75rem 1rem;
+        flex: 1 0 auto;
+        min-width: 80px;
+        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 */
--- a/views/DashboardView.php
+++ b/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/dashboard.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=20260131d"></script>
    <script nonce="<?php echo $nonce; ?>">
        // CSRF Token for AJAX requests
        window.CSRF_TOKEN = '<?php echo CsrfMiddleware::getToken(); ?>';
--- a/views/TicketView.php
+++ b/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/ticket.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=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/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; ?>" 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=20260131d"></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(); ?>';