Skip to content

Add scrollable layout to onboarding page #4206

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
spencrmartin merged 1 commit into from
Aug 20, 2025
Merged

Add scrollable layout to onboarding page #4206

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 21 additions & 17 deletions ui/desktop/src/components/ProviderGuard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,25 +200,27 @@ export default function ProviderGuard({ children }: ProviderGuardProps) {

if (showFirstTimeSetup) {
return (
<div className="min-h-screen w-full flex flex-col items-center justify-center p-4 bg-background-default">
<div className="max-w-lg w-full mx-auto p-8">
{/* Header section - same width as buttons, left aligned */}
<div className="text-left mb-8 sm:mb-12">
<div className="space-y-3 sm:space-y-4">
<div className="origin-bottom-left goose-icon-animation">
<Goose className="size-6 sm:size-8" />
<div className="h-screen w-full bg-background-default overflow-hidden">
<div className="h-full overflow-y-auto">
<div className="min-h-full flex flex-col items-center justify-center p-4 py-8">
<div className="max-w-lg w-full mx-auto p-8">
{/* Header section - same width as buttons, left aligned */}
<div className="text-left mb-8 sm:mb-12">
<div className="space-y-3 sm:space-y-4">
<div className="origin-bottom-left goose-icon-animation">
<Goose className="size-6 sm:size-8" />
</div>
<h1 className="text-2xl sm:text-4xl font-light text-left">
Welcome to Goose
</h1>
</div>
<p className="text-text-muted text-base sm:text-lg mt-4 sm:mt-6">
Since it's your first time here, let's get your set you with a provider so we can make incredible work together.
</p>
</div>
<h1 className="text-2xl sm:text-4xl font-light text-left">
Welcome to Goose
</h1>
</div>
<p className="text-text-muted text-base sm:text-lg mt-4 sm:mt-6">
Since it's your first time here, let's get your set you with a provider so we can make incredible work together.
</p>
</div>

{/* Setup options - same width container */}
<div className="space-y-3 sm:space-y-4">
{/* Setup options - same width container */}
<div className="space-y-3 sm:space-y-4">
{/* Primary OpenRouter Card with subtle shimmer - wrapped for badge positioning */}
<div className="relative">
{/* Recommended badge - positioned relative to wrapper */}
Expand Down Expand Up @@ -313,6 +315,8 @@ export default function ProviderGuard({ children }: ProviderGuardProps) {
</p>
</div>

</div>
</div>
</div>
</div>
</div>
Expand Down