fix(onboarding): keep ai setup dialog scrollable

This commit is contained in:
lucaronin
2026-05-06 12:22:35 +02:00
parent 9c0d0a8566
commit 35be37d256
2 changed files with 25 additions and 4 deletions

View File

@@ -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' },

View File

@@ -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}