fix(FN-759): restructure terminal header for mobile and add regression tests

- Restructure TerminalModal header layout to support mobile viewports with proper flex sizing
- Add CSS styles for responsive terminal header with title truncation and icon wrapping
- Add inline comment documenting mobile header layout contract
- Add comprehensive TerminalModal test suite covering mobile layout, resize behavior, and header interactions
- Clean up unrelated store test and changeset remnants from prior work
This commit is contained in:
gsxdsm
2026-04-02 22:59:37 -07:00
parent 0d9906ee93
commit 6ffe3dc963
3 changed files with 204 additions and 16 deletions

View File

@@ -6360,6 +6360,7 @@ body {
.terminal-tabs {
display: flex;
flex: 1;
min-width: 0;
overflow-x: auto;
gap: 0;
padding: 0 4px;
@@ -6989,10 +6990,47 @@ body {
border: none;
}
/* Stack tabs and actions on separate rows */
.terminal-header {
flex-wrap: wrap;
padding-top: env(safe-area-inset-top, 0);
}
/* Tabs get their own full-width row and remain scrollable */
.terminal-tabs {
flex: 1 1 100%;
min-width: 100%;
order: 1;
}
/* Hide the redundant title/status indicator on mobile — .terminal-status-bar shows connection state */
.terminal-title {
display: none;
}
/* Actions sit on a compact second row */
.terminal-actions {
flex: 1 1 100%;
order: 2;
justify-content: flex-end;
border-top: 1px solid var(--border);
padding: 0 4px;
}
/* Hide text labels on action buttons to save space */
.terminal-action-label {
display: none;
}
.terminal-reconnect-btn,
.terminal-restart-btn,
.terminal-clear-btn {
padding: 8px;
min-height: 36px;
min-width: 36px;
justify-content: center;
}
.terminal-tab {
min-height: 48px;
padding: 12px 14px;
@@ -7018,22 +7056,12 @@ body {
max-width: 200px;
}
.terminal-clear-btn {
padding: var(--space-sm) var(--space-md);
min-height: 36px;
}
.terminal-empty-state {
padding: var(--space-xl);
padding-bottom: max(24px, env(safe-area-inset-bottom, 0));
}
/* Mobile styles for interactive terminal */
.terminal-title {
padding: 0 12px;
font-size: 13px;
}
.terminal-output {
padding: var(--space-md);
font-size: 12px;