diff --git a/frontend/src/v2/__tests__/v2-phone-shell.test.ts b/frontend/src/v2/__tests__/v2-phone-shell.test.ts index 625d9756e..390f6fd50 100644 --- a/frontend/src/v2/__tests__/v2-phone-shell.test.ts +++ b/frontend/src/v2/__tests__/v2-phone-shell.test.ts @@ -38,6 +38,21 @@ describe('D223 phone shell', () => { expect(css.indexOf('.v2-feature__body {')).toBeLessThan(at); }); + test('agent settings and memory pages get the same 52px bar inside the 760px query', () => { + const agentCss = fs.readFileSync(path.join(__dirname, '../agents/v2-agent-settings.css'), 'utf8'); + const tail = agentCss.slice(agentCss.indexOf('D223 (TASK-730)')); + expect(tail).toMatch(/\.v2-agent-settings > \.v2-page-head,\s*\.v2-agent-settings > \.v2-agent-memory__head\s*\{[^}]*min-height:\s*52px/); + const at = agentCss.indexOf('D223 (TASK-730)'); + expect(agentCss.slice(0, at).lastIndexOf('@media')).toBe(agentCss.lastIndexOf('@media (max-width: 760px)', at)); + }); + + test('the memory bar lets the name shrink and drops the tab nav margin so it stays 52px', () => { + const agentCss = fs.readFileSync(path.join(__dirname, '../agents/v2-agent-settings.css'), 'utf8'); + const tail = agentCss.slice(agentCss.indexOf('D223 (TASK-730)')); + expect(tail).toMatch(/__ident\s*\{\s*min-width:\s*0/); + expect(tail).toMatch(/__seg\s*\{[^}]*margin-top:\s*0/); + }); + test('the settings head spans the pane and only the body scrolls', () => { expect(phone).toMatch(/\.v2-feature--settings > \.v2-feature__body\s*\{[^}]*padding:\s*0/); expect(phone).toMatch(/\.v2-feature--settings \.v2-feature__legacy\s*\{[^}]*max-width:\s*none/); diff --git a/frontend/src/v2/agents/v2-agent-settings.css b/frontend/src/v2/agents/v2-agent-settings.css index 915aa1c04..bfef93134 100644 --- a/frontend/src/v2/agents/v2-agent-settings.css +++ b/frontend/src/v2/agents/v2-agent-settings.css @@ -130,6 +130,21 @@ .v2-agent-settings { padding: 16px; } .v2-agent-settings__section-head { flex-direction: column; align-items: flex-start; } .v2-agent-settings__key-meta { display: grid; gap: 4px; } + /* D223 (TASK-730): the same 52px phone top bar feature pages get from + .v2-feature__header. The page pads 16px, so the bar bleeds out of it. */ + .v2-agent-settings > .v2-page-head, + .v2-agent-settings > .v2-agent-memory__head { + display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; min-height: 52px; + margin: -16px -16px 12px; padding: 0 10px 0 12px; + border-bottom: 1px solid var(--v2-border-soft); + } + .v2-agent-settings > .v2-page-head h1, + .v2-agent-settings > .v2-agent-memory__head .v2-agent-memory__ident { min-width: 0; } + .v2-agent-settings > .v2-agent-memory__head .v2-agent-memory__seg { flex: none; margin-top: 0; } + .v2-agent-settings > .v2-agent-memory__head .v2-agent-memory__ident h1 { + margin: 0; font: 800 21px/1 var(--v2-font-display); letter-spacing: -0.03em; + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + } } /* Agent memory tab (TASK-690 slice 1): frame metrics from docs/design/artboards/d215 diff --git a/frontend/src/v2/v2.css b/frontend/src/v2/v2.css index 4cb83e1d5..4dec889f8 100644 --- a/frontend/src/v2/v2.css +++ b/frontend/src/v2/v2.css @@ -10879,6 +10879,8 @@ details[open] > .v2-settings__summary > .v2-settings__icon:last-child { transfor .v2-root:lang(zh) .v2-login__title, .v2-root:lang(zh) .v2-feature__title, .v2-root:lang(zh) .v2-feature__header .v2-feature__title, +.v2-root:lang(zh) .v2-agent-settings > .v2-page-head h1, +.v2-root:lang(zh) .v2-agent-settings > .v2-agent-memory__head .v2-agent-memory__ident h1, .v2-root:lang(zh) .v2-settings__label, .v2-root:lang(zh) .v2-settings__account-name, .v2-root:lang(zh) .v2-settings__section .v2-billing__title,