Skip to content

fix(dashboard): Rework workspace onboarding#6405

Merged
dave-hawkins merged 5 commits into
mainfrom
dh/fix-onboarding
Jun 10, 2026
Merged

fix(dashboard): Rework workspace onboarding#6405
dave-hawkins merged 5 commits into
mainfrom
dh/fix-onboarding

Conversation

@dave-hawkins

@dave-hawkins dave-hawkins commented Jun 10, 2026

Copy link
Copy Markdown
Collaborator

What does this PR do?

  • The workspace onboarding page used a fixed height layout so on smaller viewports, it cropped the new workspace form almost entirely to the point where I don't think people would even see the form inputs.
  • I've added a new full page layout component to deal with this, and simplified the onboarding step as it had a lot of unneccesary information on it that I assume was from legacy routes.

Video

https://supercut.ai/share/unkey/BN4Xkn1EZ4553tk9qEwXDT

Screenshots

Before:
CleanShot 2026-06-10 at 07 36 24@2x

After:
CleanShot 2026-06-10 at 08 41 06@2x
CleanShot 2026-06-10 at 08 41 01@2x

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • Chore (refactoring code, technical debt, workflow improvements)
  • Enhancement (small improvements)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How should this be tested?

  • Visit /new. With a short browser window, the card content scrolls (page-level) instead of clipping — the Workspace name and URL handle fields stay reachable.
  • Focus an input: the focus ring renders fully and is not clipped.
  • Loading state: the Suspense fallback is a skeleton sized to the loaded card, so there's no layout jump when content loads.
  • /auth/sign-in and /auth/sign-up still center correctly with the shared layout.

Not verified: the auth pages couldn't be exercised in local-auth mode (they redirect to /apis when a session already exists). The auth layout change is type-checked and structurally equivalent to the previous centering, but a reviewer on WorkOS auth should confirm visually.

Checklist

Required

  • Filled out the "How to test" section in this PR
  • Read Internal Workflow Guide
  • Self-reviewed my own code
  • Commented on my code in hard-to-understand areas
  • Ran `pnpm build`
  • Ran `pnpm fmt`
  • Ran `make fmt` on `/go` directory
  • Checked for warnings, there are none
  • Removed all `console.logs`
  • Merged the latest changes from main onto my branch with `git pull origin main`
  • My changes don't cause any responsiveness issues

Appreciated

  • If a UI change was made: Added a screen recording or screenshots to this PR
  • Updated the Unkey Docs if changes were necessary

Use a min-h-dvh FullScreenLayout so the onboarding and auth pages
scroll instead of clipping content on short viewports. Restructure
the single-step wizard into a composable OnboardingCard with a
Skeleton loading state.
@vercel

vercel Bot commented Jun 10, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
dashboard Ready Ready Preview, Comment Jun 10, 2026 9:30am
design Ready Ready Preview, Comment Jun 10, 2026 9:30am

Request Review

@dave-hawkins dave-hawkins changed the title fix(dashboard): Rework workspace onboarding layout fix(dashboard): Rework workspace onboarding Jun 10, 2026

@pullfrog pullfrog Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ No new issues found.

Reviewed changes — a focused UI refactor of the /new workspace onboarding page, replacing a fixed-height layout that clipped the form on short viewports with a scrollable card-based layout, plus shared full-screen layout primitives reused by the auth pages.

  • New FullScreenLayout / FullScreenContent primitives — added to web/internal/ui/src/components/full-screen-layout.tsx and exported from index.ts. FullScreenLayout is a min-h-dvh flex column; FullScreenContent flexes to fill remaining height, so card content scrolls at the page level instead of clipping.
  • New onboarding-card.tsx — shadcn-style OnboardingCard + Header/Title/Description/Content/Footer subcomponents.
  • Simplified OnboardingContent — drops the multi-step wizard, step counter, and UserButton; renders a single card consuming { body, submit, isDisabled, isLoading } from useWorkspaceStep.
  • Rewrote OnboardingFallbackSkeleton-based card sized to mirror the loaded card so there's no layout jump on hydration. The Suspense fallback in page.tsx and the loaded content now share the same FullScreenLayout + OnboardingCard shape.
  • Deleted onboarding-wizard.tsx — 183-line component removed; no remaining references in the repo (the OnboardingStep* grep hits are unrelated projects/apps/new components).
  • useWorkspaceStep reshaped — returns a local WorkspaceStep type instead of OnboardingStep, adds a pointer-device-only autofocus effect, and renames onSubmitsubmitWorkspace. Button import retained (still used in the error toast).
  • auth/layout.tsx — swaps the hand-rolled min-h-screen + pt-16 -mt-16 offset for the shared layout primitives.

Verified the wizard deletion is complete, Skeleton is a real @unkey/ui export, the autofocus effect is SSR-safe (runs in a client useEffect), and the fallback/content layouts match. The auth-page change is structurally equivalent to the prior centering; as the author noted, a visual check on WorkOS auth would be worthwhile but the risk is low. Mergeable as-is.

Pullfrog  | View workflow run | Using Claude Opus𝕏

@ogzhanolguncu ogzhanolguncu left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:shipit:

@chronark chronark left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please do not drop the signout method

I get super annoyed with some saases where I sign in via google, but choose the wrong one, and then there's no way out besides manually clearing cookies or finishing their shitty onboarding

@pullfrog pullfrog Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ No critical issues — one minor suggestion inline.

Reviewed changes — the new commit since the prior pullfrog review re-introduces a way to sign out of the onboarding page, addressing @chronark's review feedback.

  • Added a Sign out button to OnboardingContent — replaces the previously removed UserButton with a plain button in the top-right that calls the signOut server action and redirects to /auth/sign-in.

Pullfrog  | Fix all ➔Fix 👍s ➔View workflow run | Using Claude Opus𝕏

Comment thread web/apps/dashboard/app/new/components/onboarding-content.tsx Outdated

@pullfrog pullfrog Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ No new issues found.

Reviewed changes — the new commit since the prior pullfrog review clears the React Query cache before signing out on the onboarding page.

  • Clear query cache on onboarding sign out — the Sign out handler in OnboardingContent now pulls useQueryClient() and runs queryClient.clear(); await signOut();, matching the existing UserButton pattern (user-button.tsx:82-85). This addresses the prior suggestion about stale cached data surfacing after a re-sign-in as a different user.

Pullfrog  | View workflow run | Using Claude Opus𝕏

@dave-hawkins dave-hawkins added this pull request to the merge queue Jun 10, 2026
Merged via the queue into main with commit 6a32f2e Jun 10, 2026
15 checks passed
@dave-hawkins dave-hawkins deleted the dh/fix-onboarding branch June 10, 2026 09:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants