feat(FN-4024): scope chat styles to owning components
Scoped chat and popup styles to their owning components, removing cross-contaminating global rules from AgentReflectionsTab and consolidating FileMentionPopup and AgentMentionPopup styles locally, while applying final tokenization and budget style revisions in the fixup commit. Fusion-Task-Id: FN-4024
This commit is contained in:
Fusion
@@ -115,8 +115,8 @@
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.agent-mention-popup {
|
||||
min-width: calc(var(--space-xl) * 9);
|
||||
max-width: 100%;
|
||||
min-width: 200px;
|
||||
max-width: min(280px, 100%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -291,40 +291,40 @@
|
||||
/* ── Budget Progress Bar ────────────────────────────────────────────────────── */
|
||||
|
||||
.budget-progress-container {
|
||||
margin-top: 4px;
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.budget-progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: var(--bg-secondary, #161b22);
|
||||
border-radius: 4px;
|
||||
height: var(--space-sm);
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
margin-top: 4px;
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.budget-progress-bar__fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease, background-color 0.3s ease;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: width var(--transition-slow), background-color var(--transition-slow);
|
||||
}
|
||||
|
||||
.budget-progress-bar__fill--green {
|
||||
background: var(--state-active-text, #3fb950);
|
||||
background: var(--color-success);
|
||||
}
|
||||
|
||||
.budget-progress-bar__fill--amber {
|
||||
background: var(--state-paused-text, #e3b541);
|
||||
background: var(--color-warning);
|
||||
}
|
||||
|
||||
.budget-progress-bar__fill--red {
|
||||
background: var(--state-error-text, #f85149);
|
||||
background: var(--color-error);
|
||||
}
|
||||
|
||||
.budget-progress-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary, #8b949e);
|
||||
margin-top: 4px;
|
||||
color: var(--text-muted);
|
||||
margin-top: var(--space-xs);
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -333,9 +333,9 @@
|
||||
.budget-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
gap: var(--space-xs);
|
||||
padding: calc(var(--space-xs) / 2) var(--space-sm);
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -345,117 +345,22 @@
|
||||
.budget-warning-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--state-error-bg, color-mix(in srgb, var(--color-error) 15%, transparent));
|
||||
color: var(--state-error-text, #f85149);
|
||||
border: 1px solid var(--state-error-border, #f85149);
|
||||
color: var(--state-error-text);
|
||||
border: 1px solid var(--state-error-border);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
/* ── Budget Reset Button ─────────────────────────────────────────────────────── */
|
||||
|
||||
.btn-reset-budget {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* ── Chat View Mobile Styles ────────────────────────────────────────────────── */
|
||||
|
||||
/* Default: hide footer, mobile will override to show bottom-anchored New Chat */
|
||||
.chat-sidebar-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chat-view {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chat-sidebar {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
max-height: none;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Desktop header hidden on mobile - New Chat is in footer instead */
|
||||
.chat-sidebar-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide search controls on mobile list view */
|
||||
.chat-sidebar-search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Session list fills available space with scrolling */
|
||||
.chat-sidebar-list {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Footer with bottom-anchored New Chat action */
|
||||
.chat-sidebar-footer {
|
||||
display: flex;
|
||||
padding: var(--space-md);
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.chat-sidebar-footer-btn {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chat-sidebar--hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.chat-new-dialog {
|
||||
width: 95vw;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.chat-thread-header {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.chat-skill-menu {
|
||||
left: var(--space-md);
|
||||
right: calc(var(--space-md) + var(--mobile-nav-height));
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Mobile responsive for file mention popup */
|
||||
@media (max-width: 768px) {
|
||||
.file-mention-popup {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.file-mention-popup-item {
|
||||
min-height: 36px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.agent-mention-popup {
|
||||
max-width: 280px;
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -112,7 +112,11 @@
|
||||
position: fixed;
|
||||
/* Add iOS home-indicator inset so the popover doesn't sit inside the
|
||||
indicator zone on iPhone with viewport-fit=cover. */
|
||||
bottom: calc(40px + env(safe-area-inset-bottom, 0px));
|
||||
bottom: calc(
|
||||
var(--mobile-nav-height) +
|
||||
env(safe-area-inset-bottom, 0px) +
|
||||
var(--standalone-bottom-gap)
|
||||
);
|
||||
left: max(8px, env(safe-area-inset-left, 0px));
|
||||
right: max(8px, env(safe-area-inset-right, 0px));
|
||||
min-width: auto;
|
||||
|
||||
@@ -1274,10 +1274,32 @@
|
||||
thread takes the full viewport. The thread already renders a back
|
||||
button (ChevronLeft) on mobile to flip back to the session list. */
|
||||
@media (max-width: 768px) {
|
||||
.chat-view {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chat-sidebar {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
max-height: none;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chat-sidebar-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chat-sidebar-search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chat-sidebar-list {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* When the sidebar is shown, the thread is hidden so only the session
|
||||
@@ -1405,7 +1427,23 @@
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
max-width: 82%;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.chat-new-dialog {
|
||||
width: 95vw;
|
||||
margin: var(--space-lg);
|
||||
}
|
||||
|
||||
.chat-thread-header {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
}
|
||||
|
||||
.chat-skill-menu {
|
||||
left: var(--space-md);
|
||||
right: calc(var(--space-md) + var(--mobile-nav-height));
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.chat-jump-to-latest {
|
||||
|
||||
@@ -105,9 +105,13 @@
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.agent-mention-popup {
|
||||
max-width: 280px;
|
||||
min-width: 200px;
|
||||
.file-mention-popup {
|
||||
max-height: calc(var(--space-xl) * 8 + var(--space-sm));
|
||||
}
|
||||
|
||||
.file-mention-popup-item {
|
||||
min-height: calc(var(--space-lg) + var(--space-xl) - var(--space-sm));
|
||||
padding: calc(var(--space-sm) + (var(--space-xs) / 2)) var(--space-md);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -118,26 +122,26 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
gap: var(--space-lg);
|
||||
color: var(--text-secondary);
|
||||
padding: 24px;
|
||||
padding: var(--space-xl);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chat-empty-state h2 {
|
||||
font-size: 20px;
|
||||
font-size: calc(var(--space-xl) - var(--space-xs));
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chat-empty-state-agent-select select {
|
||||
padding: 8px 12px;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
min-width: 200px;
|
||||
font-size: calc(var(--space-sm) + (var(--space-xs) * 1.5));
|
||||
min-width: calc(var(--space-xl) * 8 + var(--space-sm));
|
||||
}
|
||||
|
||||
/* New chat dialog */
|
||||
@@ -155,36 +159,36 @@
|
||||
.chat-new-dialog {
|
||||
background: var(--bg-elevated, var(--bg));
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
width: 400px;
|
||||
max-width: 90vw;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-xl);
|
||||
width: calc(var(--space-xl) * 16 + var(--space-md));
|
||||
max-width: calc(100vw - (var(--space-md) * 2));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.chat-new-dialog h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-size: calc(var(--space-lg) + (var(--space-xs) / 2));
|
||||
}
|
||||
|
||||
.chat-new-dialog label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
gap: var(--space-xs);
|
||||
font-size: calc(var(--space-sm) + (var(--space-xs) * 1.25));
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.chat-new-dialog input,
|
||||
.chat-new-dialog select {
|
||||
padding: 8px 12px;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-size: calc(var(--space-sm) + (var(--space-xs) * 1.5));
|
||||
}
|
||||
|
||||
.chat-new-dialog-mode-toggle {
|
||||
@@ -199,7 +203,7 @@
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-size: calc(var(--space-sm) + (var(--space-xs) * 1.25));
|
||||
cursor: pointer;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
@@ -238,42 +242,42 @@
|
||||
.chat-new-dialog-model-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
/* Agent list in new chat dialog */
|
||||
.chat-new-dialog-loading,
|
||||
.chat-new-dialog-empty {
|
||||
padding: 16px;
|
||||
padding: var(--space-lg);
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
font-size: calc(var(--space-sm) + (var(--space-xs) * 1.5));
|
||||
}
|
||||
|
||||
.chat-new-dialog-agent-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
max-height: 300px;
|
||||
gap: var(--space-xs);
|
||||
max-height: calc(var(--space-xl) * 12 + var(--space-md));
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-xs);
|
||||
}
|
||||
|
||||
.chat-new-dialog-agent-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-size: calc(var(--space-sm) + (var(--space-xs) * 1.5));
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
.chat-new-dialog-agent-item:hover {
|
||||
@@ -291,7 +295,7 @@
|
||||
}
|
||||
|
||||
.chat-new-dialog-agent-role {
|
||||
font-size: 12px;
|
||||
font-size: var(--space-md);
|
||||
color: var(--text-secondary);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
@@ -303,16 +307,16 @@
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.quick-chat-fab {
|
||||
right: 4px;
|
||||
bottom: calc(4px + var(--executor-footer-height-mobile, var(--executor-footer-height, 0px)) + var(--mobile-nav-height, 44px) + env(safe-area-inset-bottom, 0px));
|
||||
right: var(--space-xs);
|
||||
bottom: calc(var(--space-xs) + var(--executor-footer-height-mobile, var(--executor-footer-height, 0px)) + var(--mobile-nav-height, 44px) + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
.quick-chat-panel {
|
||||
right: 4px;
|
||||
left: 4px;
|
||||
right: var(--space-xs);
|
||||
left: var(--space-xs);
|
||||
width: auto;
|
||||
bottom: calc(60px + var(--executor-footer-height-mobile, var(--executor-footer-height, 0px)) + var(--mobile-nav-height, 44px) + env(safe-area-inset-bottom, 0px));
|
||||
height: min(520px, calc(100dvh - 120px));
|
||||
bottom: calc((var(--space-xl) * 2) + var(--space-md) + var(--executor-footer-height-mobile, var(--executor-footer-height, 0px)) + var(--mobile-nav-height, 44px) + env(safe-area-inset-bottom, 0px));
|
||||
height: min(calc(var(--space-xl) * 21 + var(--space-md)), calc(100dvh - (var(--space-xl) * 5)));
|
||||
}
|
||||
|
||||
/* ChatView New Chat + Delete dialogs should stay inset/compact on mobile.
|
||||
|
||||
Reference in New Issue
Block a user