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>
This commit is contained in:
2026-01-31 11:51:02 -05:00
parent cbce4b5fac
commit b0ffc2cdc2
4 changed files with 112 additions and 26 deletions

View File

@@ -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 */