313eea1461
Make long Active Agents lists reachable within constrained mobile and short desktop layouts. - Establish a bounded, touch-friendly Active Agents scroll owner. - Add unit and Chromium layout coverage for populated and empty overview states. - Document the required browser smoke coverage and add a patch changeset. Files changed: .../fn-8935-agents-overview-mobile-scroll.md | 7 ++ docs/testing.md | 2 + .../__tests__/browser-layout-smoke-fixture.test.ts | 26 +++++- .../dashboard/app/components/AgentsOverviewBar.css | 14 ++++ .../AgentsOverviewBar.mobile-scroll.test.tsx | 96 ++++++++++++++++++++++ .../dashboard/scripts/browser-layout-smoke.mjs | 86 +++++++++++++++++++ 6 files changed, 230 insertions(+), 1 deletion(-) Fusion-Task-Id: FN-8935 Fusion-Task-Lineage: 43b793b9-3629-45a8-b6c1-d8100467e960 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
86 lines
2.0 KiB
CSS
86 lines
2.0 KiB
CSS
/*
|
|
FNXC:AgentsOverviewScroll 2026-08-10-10:02:
|
|
Overview owns vertical scrolling when Active Agents exceeds the constrained Agents flex shell, so mobile and short viewports can reach every card without restoring document scrolling. The overview itself clips its flex child while the content scrollport contains overscroll before nested card transcripts can hand it to the page.
|
|
*/
|
|
.agents-overview-bar {
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--surface);
|
|
padding: var(--space-md) var(--space-lg);
|
|
display: flex;
|
|
flex: 0 1 auto;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
max-height: 70%;
|
|
gap: var(--space-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.agents-overview-bar__toggle {
|
|
width: 100%;
|
|
flex-shrink: 0;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--card);
|
|
color: var(--text);
|
|
padding: var(--space-sm) var(--space-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-sm);
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast), border-color var(--transition-fast);
|
|
}
|
|
|
|
.agents-overview-bar__toggle:hover {
|
|
background: var(--card-hover);
|
|
}
|
|
|
|
.agents-overview-bar__toggle:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring-strong);
|
|
}
|
|
|
|
.agents-overview-bar__title-wrap {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.agents-overview-bar__title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.agents-overview-bar__meta {
|
|
font-size: calc(var(--space-sm) + var(--space-xs));
|
|
}
|
|
|
|
.agents-overview-bar__content {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
gap: var(--space-md);
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.agents-overview-bar__metrics {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.agents-overview-bar__active-panel {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.agents-overview-bar {
|
|
padding: var(--space-sm) var(--space-md);
|
|
}
|
|
|
|
.agents-overview-bar__toggle {
|
|
min-height: calc(var(--space-2xl) + var(--space-sm));
|
|
}
|
|
}
|