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:
@@ -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 */
|
||||
|
||||
Reference in New Issue
Block a user