diff --git a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts index ad93564f6..415fd6774 100644 --- a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts +++ b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts @@ -194,7 +194,7 @@ describe('v2 layout invariants (CSS rule presence)', () => { const podModel = read('../../../../backend/models/Pod.ts'); test('agent Settings key metadata wraps within the page at phone width', () => { - expect(ruleBody(agentSettings, '.v2-agent-settings')).toContain('width: min(100%, 960px)'); + expect(ruleBody(agentSettings, '.v2-agent-settings__column')).toContain('width: min(100%, 960px)'); expect(ruleBody(agentSettings, '.v2-agent-settings__key-meta')).toContain('flex-wrap: wrap'); expect(mediaBlockContaining(agentSettings, '.v2-agent-settings__key-meta')).toContain('display: grid'); }); @@ -5041,6 +5041,12 @@ describe('agent Wake and Pods controls', () => { expect(remove).toContain('background: var(--v2-surface)'); expect(remove).toContain('border: 1px solid var(--v2-border)'); }); + + test('message-wake segment wraps its options instead of overflowing the row', () => { + const segment = ruleBody(css, '.v2-agent-wake-pods__segment'); + expect(segment).toContain('display: flex'); + expect(segment).toContain('flex-wrap: wrap'); + }); }); describe('agent runtime and grants fit the Settings column', () => { diff --git a/frontend/src/v2/agents/V2AgentSettingsPage.tsx b/frontend/src/v2/agents/V2AgentSettingsPage.tsx index a7394958c..d6439d6b1 100644 --- a/frontend/src/v2/agents/V2AgentSettingsPage.tsx +++ b/frontend/src/v2/agents/V2AgentSettingsPage.tsx @@ -255,67 +255,69 @@ const V2AgentSettingsPage: React.FC = () => { return (
{t('agentSettings.yourTeam')}} /> - - - -
-
-

{t('agentSettings.key')}

- {keysForbidden ? null : installation?.runtime?.runtimeType === 'wrapper' ? ( - {t('agentSettings.wrapperReconnect')} - ) : !disconnected && ( - +
+ + + +
+
+

{t('agentSettings.key')}

+ {keysForbidden ? null : installation?.runtime?.runtimeType === 'wrapper' ? ( + {t('agentSettings.wrapperReconnect')} + ) : !disconnected && ( + + )} +
+ {error &&

{error}

} + {pendingAction === 'replace' && !keysForbidden && ( +
+

{t('agentByo.rekey.warning', { name: access.displayName || agentName })}

+
+ + +
+
)} -
- {error &&

{error}

} - {pendingAction === 'replace' && !keysForbidden && ( -
-

{t('agentByo.rekey.warning', { name: access.displayName || agentName })}

-
- - + {oneTimeKey && ( +
+ {t('agentSettings.copyNow')} + {oneTimeKey} +
-
- )} - {oneTimeKey && ( -
- {t('agentSettings.copyNow')} - {oneTimeKey} - -
- )} - {keysForbidden ?

{t('agentSettings.keyUnavailable')}

: ( - <> - {activeKeys.length ?
    {activeKeys.map(renderKey)}
- :

{t('agentSettings.noActiveKeys')}

} - {revokedKeys.length > 0 &&
- {t('agentSettings.revokedCount', { count: revokedKeys.length })} -
    {revokedKeys.map(renderKey)}
-
} - - )} -
- {installation && } - { - await updateRuntime(changes); - } : undefined} - /> - -
- pod.id === podId)?.name || podId} agentName={agentName} instanceId={instanceId} /> + )} + {keysForbidden ?

{t('agentSettings.keyUnavailable')}

: ( + <> + {activeKeys.length ?
    {activeKeys.map(renderKey)}
+ :

{t('agentSettings.noActiveKeys')}

} + {revokedKeys.length > 0 &&
+ {t('agentSettings.revokedCount', { count: revokedKeys.length })} +
    {revokedKeys.map(renderKey)}
+
} + + )} + + {installation && } + { + await updateRuntime(changes); + } : undefined} + /> + +
+ pod.id === podId)?.name || podId} agentName={agentName} instanceId={instanceId} /> +
); diff --git a/frontend/src/v2/agents/V2AgentWakePods.tsx b/frontend/src/v2/agents/V2AgentWakePods.tsx index 8af91001d..302489604 100644 --- a/frontend/src/v2/agents/V2AgentWakePods.tsx +++ b/frontend/src/v2/agents/V2AgentWakePods.tsx @@ -188,17 +188,20 @@ const V2AgentWakePods: React.FC<{ {installations.map((entry) => (
{entry.podName} -
- {t('agentSettings.messageWake')} - {MESSAGE_WAKE_CHOICES.map((choice) => ( - - ))} -
+
+ {t('agentSettings.messageWake')} +
+ {MESSAGE_WAKE_CHOICES.map((choice) => ( + + ))} +
+