fix(onboarding): keep ai setup dialog scrollable
This commit is contained in:
@@ -86,6 +86,21 @@ describe('AiAgentsOnboardingPrompt', () => {
|
||||
})
|
||||
})
|
||||
|
||||
it('keeps the long setup card bounded with a scrollable content area', () => {
|
||||
renderPrompt()
|
||||
|
||||
expect(screen.getByTestId('ai-agents-onboarding-card')).toHaveClass(
|
||||
'max-h-[calc(100dvh-2rem)]',
|
||||
'overflow-hidden',
|
||||
)
|
||||
expect(screen.getByTestId('ai-agents-onboarding-scroll')).toHaveClass(
|
||||
'min-h-0',
|
||||
'overflow-y-auto',
|
||||
'overscroll-contain',
|
||||
)
|
||||
expect(screen.getByTestId('ai-agents-onboarding-continue')).toHaveTextContent('Set up later')
|
||||
})
|
||||
|
||||
it('uses the surrounding surface as a drag region and excludes the card', () => {
|
||||
renderPrompt({
|
||||
claude_code: { status: 'installed', version: '1.0.20' },
|
||||
|
||||
@@ -122,8 +122,11 @@ export function AiAgentsOnboardingPrompt({
|
||||
contentClassName="w-full max-w-2xl"
|
||||
testId="ai-agents-onboarding-screen"
|
||||
>
|
||||
<Card className="border-border bg-background shadow-sm">
|
||||
<CardHeader className="items-center gap-5 text-center">
|
||||
<Card
|
||||
className="flex max-h-[calc(100dvh-2rem)] flex-col overflow-hidden border-border bg-background shadow-sm"
|
||||
data-testid="ai-agents-onboarding-card"
|
||||
>
|
||||
<CardHeader className="shrink-0 items-center gap-5 text-center">
|
||||
<div className={`flex size-16 items-center justify-center rounded-2xl ${copy.accentClassName}`}>
|
||||
{copy.icon}
|
||||
</div>
|
||||
@@ -137,7 +140,10 @@ export function AiAgentsOnboardingPrompt({
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4">
|
||||
<CardContent
|
||||
className="min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain"
|
||||
data-testid="ai-agents-onboarding-scroll"
|
||||
>
|
||||
<AiModeChoices />
|
||||
{showLegacyClaudeCompatibility ? (
|
||||
<div
|
||||
@@ -153,7 +159,7 @@ export function AiAgentsOnboardingPrompt({
|
||||
<AgentStatusList statuses={statuses} />
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="flex-wrap justify-center gap-3">
|
||||
<CardFooter className="shrink-0 flex-wrap justify-center gap-3">
|
||||
{missingAgents.map((definition) => (
|
||||
<Button
|
||||
key={definition.id}
|
||||
|
||||
Reference in New Issue
Block a user