Skip to content

Commit e31b03e

Browse files
authored
fix(webapp): Responsive improvements for the onboarding screens (#3318)
Simple responsive breakpoint changes to the 3 onboarding screens + the login screen to make it mobile friendlier <img width="523" height="872" alt="CleanShot 2026-04-02 at 17 18 55" src="https://github.com/user-attachments/assets/815d19ca-df9b-4b3e-8f6d-e00c81628679" />
1 parent f1f1d02 commit e31b03e

File tree

10 files changed

+41
-25
lines changed

10 files changed

+41
-25
lines changed

apps/webapp/app/components/BackgroundWrapper.tsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,9 @@ import blurredDashboardBackgroundTable from "~/assets/images/blurred-dashboard-b
55

66
export function BackgroundWrapper({ children }: { children: ReactNode }) {
77
return (
8-
<div className="relative h-full w-full overflow-hidden">
9-
{/* Left menu top background - fixed width 260px, maintains aspect ratio */}
8+
<div className="relative h-full w-full overflow-hidden bg-background-dimmed lg:bg-transparent">
109
<div
11-
className="absolute left-0 top-0 w-[260px] bg-contain bg-left-top bg-no-repeat"
10+
className="absolute left-0 top-0 hidden w-[260px] bg-contain bg-left-top bg-no-repeat lg:block"
1211
style={{
1312
backgroundImage: `url(${blurredDashboardBackgroundMenuTop})`,
1413
aspectRatio: "auto",
@@ -17,9 +16,8 @@ export function BackgroundWrapper({ children }: { children: ReactNode }) {
1716
}}
1817
/>
1918

20-
{/* Left menu bottom background - fixed width 260px, maintains aspect ratio */}
2119
<div
22-
className="absolute bottom-0 left-0 w-[260px] bg-contain bg-left-bottom bg-no-repeat"
20+
className="absolute bottom-0 left-0 hidden w-[260px] bg-contain bg-left-bottom bg-no-repeat lg:block"
2321
style={{
2422
backgroundImage: `url(${blurredDashboardBackgroundMenuBottom})`,
2523
aspectRatio: "auto",
@@ -28,9 +26,8 @@ export function BackgroundWrapper({ children }: { children: ReactNode }) {
2826
}}
2927
/>
3028

31-
{/* Right table background - fixed width 2000px, positioned next to menu */}
3229
<div
33-
className="absolute top-0 bg-left-top bg-no-repeat"
30+
className="absolute top-0 hidden bg-left-top bg-no-repeat lg:block"
3431
style={{
3532
left: "260px",
3633
backgroundImage: `url(${blurredDashboardBackgroundTable})`,
@@ -41,7 +38,6 @@ export function BackgroundWrapper({ children }: { children: ReactNode }) {
4138
}}
4239
/>
4340

44-
{/* Content layer */}
4541
<div className="relative z-10 h-full w-full">{children}</div>
4642
</div>
4743
);

apps/webapp/app/components/LoginPageLayout.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,10 @@ export function LoginPageLayout({ children }: { children: React.ReactNode }) {
4646
}, []);
4747

4848
return (
49-
<main className="grid h-full grid-cols-1 md:grid-cols-2">
50-
<div className="border-r border-grid-bright bg-background-bright">
51-
<div className="flex h-full flex-col items-center justify-between p-6">
52-
<div className="flex w-full items-center justify-between">
49+
<main className="grid h-full grid-cols-1 lg:grid-cols-2">
50+
<div className="bg-background-dimmed lg:border-r lg:border-grid-bright lg:bg-background-bright">
51+
<div className="flex h-full flex-col items-center justify-center p-6 lg:justify-between">
52+
<div className="hidden w-full items-center justify-between lg:flex">
5353
<a href="https://trigger.dev">
5454
<LogoType className="w-36" />
5555
</a>
@@ -63,12 +63,12 @@ export function LoginPageLayout({ children }: { children: React.ReactNode }) {
6363
</div>
6464
<div className="flex h-full max-w-sm items-center justify-center">{children}</div>
6565
<Paragraph variant="small" className="text-center">
66-
Having login issues? <TextLink href="https://@trigger.dev/contact">Email us</TextLink>{" "}
66+
Having login issues? <TextLink href="https://trigger.dev/contact">Email us</TextLink>{" "}
6767
or <TextLink href="https://trigger.dev/discord">ask us in Discord</TextLink>
6868
</Paragraph>
6969
</div>
7070
</div>
71-
<div className="hidden grid-rows-[1fr_auto] pb-6 md:grid">
71+
<div className="hidden grid-rows-[1fr_auto] pb-6 lg:grid">
7272
<div className="flex h-full flex-col items-center justify-center px-16">
7373
<Header3 className="relative text-center text-2xl font-normal leading-8 text-text-dimmed transition before:relative before:right-1 before:top-0 before:text-6xl before:text-charcoal-750 before:content-['❝'] lg-height:text-xl md-height:text-lg">
7474
{randomQuote?.quote}

apps/webapp/app/components/layout/AppLayout.tsx

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,26 @@ export function PageBody({
6060
export function MainCenteredContainer({
6161
children,
6262
className,
63+
variant = "default",
6364
}: {
6465
children: React.ReactNode;
6566
className?: string;
67+
variant?: "default" | "onboarding";
6668
}) {
6769
return (
68-
<div className="h-full w-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
69-
<div className={cn("mx-auto mt-6 max-w-xs overflow-y-auto p-1 md:mt-[22vh]", className)}>
70+
<div
71+
className={cn(
72+
"h-full w-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
73+
variant === "onboarding" && "flex flex-col p-4 lg:p-0"
74+
)}
75+
>
76+
<div
77+
className={cn(
78+
"mx-auto max-w-xs p-1",
79+
variant === "onboarding" ? "m-auto lg:mx-auto lg:mb-0 lg:mt-[22vh]" : "mt-6 md:mt-[22vh]",
80+
className
81+
)}
82+
>
7083
{children}
7184
</div>
7285
</div>

apps/webapp/app/components/navigation/SideMenu.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1003,6 +1003,7 @@ function ProjectSelector({
10031003
title="Logout"
10041004
icon={ArrowRightOnRectangleIcon}
10051005
leadingIconClassName="text-text-dimmed"
1006+
danger
10061007
/>
10071008
</div>
10081009
</PopoverContent>

apps/webapp/app/components/primitives/Popover.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ const PopoverMenuItem = React.forwardRef<
6969
name?: string;
7070
value?: string;
7171
type?: React.ComponentProps<"button">["type"];
72+
danger?: boolean;
7273
}
7374
>(
7475
(
@@ -86,18 +87,23 @@ const PopoverMenuItem = React.forwardRef<
8687
name,
8788
value,
8889
type,
90+
danger = false,
8991
},
9092
ref
9193
) => {
9294
const contentProps = {
9395
variant: variant.variant,
9496
LeadingIcon: icon,
95-
leadingIconClassName,
97+
leadingIconClassName: danger
98+
? cn(leadingIconClassName, "transition-colors group-hover/button:text-error")
99+
: leadingIconClassName,
96100
fullWidth: true,
97101
textAlignLeft: true,
98102
TrailingIcon: isSelected ? CheckIcon : undefined,
99103
className: cn(
100-
"group-hover:bg-charcoal-700",
104+
danger
105+
? "transition-colors group-hover/button:bg-error/10 group-hover/button:text-error [&_span]:transition-colors [&_span]:group-hover/button:text-error"
106+
: "group-hover:bg-charcoal-700",
101107
isSelected ? "bg-charcoal-750 group-hover:bg-charcoal-600/50" : undefined,
102108
className
103109
),

apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -361,7 +361,7 @@ export default function Page() {
361361
return (
362362
<AppContainer className="bg-charcoal-900">
363363
<BackgroundWrapper>
364-
<MainCenteredContainer className="max-w-[29rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
364+
<MainCenteredContainer variant="onboarding" className="max-w-[29rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
365365
<div>
366366
<FormTitle
367367
LeadingIcon={<FolderIcon className="size-7 text-indigo-500" />}

apps/webapp/app/routes/_app.orgs.new/route.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export default function NewOrganizationPage() {
143143
return (
144144
<AppContainer className="bg-charcoal-900">
145145
<BackgroundWrapper>
146-
<MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
146+
<MainCenteredContainer variant="onboarding" className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
147147
<FormTitle
148148
LeadingIcon={<BuildingOffice2Icon className="size-6 text-fuchsia-600" />}
149149
title="Create an Organization"

apps/webapp/app/routes/confirm-basic-details.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,7 @@ export default function Page() {
241241
return (
242242
<AppContainer className="bg-charcoal-900">
243243
<BackgroundWrapper>
244-
<MainCenteredContainer className="max-w-[29rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
244+
<MainCenteredContainer variant="onboarding" className="max-w-[29rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
245245
<Form method="post" {...form.props}>
246246
<FormTitle
247247
title="Welcome to Trigger.dev"

apps/webapp/app/routes/invites.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ export default function Page() {
101101
return (
102102
<AppContainer className="bg-charcoal-900">
103103
<BackgroundWrapper>
104-
<MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
104+
<MainCenteredContainer variant="onboarding" className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
105105
<div>
106106
<FormTitle
107107
LeadingIcon={<EnvelopeIcon className="size-6 text-cyan-500" />}

apps/webapp/app/routes/vercel.onboarding.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -293,7 +293,7 @@ export default function VercelOnboardingPage() {
293293
return (
294294
<AppContainer className="bg-charcoal-900">
295295
<BackgroundWrapper>
296-
<MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
296+
<MainCenteredContainer variant="onboarding" className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
297297
<FormTitle title="Installation Expired" description={data.error} />
298298
<Button
299299
variant="primary/medium"
@@ -325,7 +325,7 @@ export default function VercelOnboardingPage() {
325325
return (
326326
<AppContainer className="bg-charcoal-900">
327327
<BackgroundWrapper>
328-
<MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
328+
<MainCenteredContainer variant="onboarding" className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
329329
<FormTitle
330330
LeadingIcon={<BuildingOfficeIcon className="size-7 text-indigo-500" />}
331331
title="Select Organization"
@@ -401,7 +401,7 @@ export default function VercelOnboardingPage() {
401401
return (
402402
<AppContainer className="bg-charcoal-900">
403403
<BackgroundWrapper>
404-
<MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
404+
<MainCenteredContainer variant="onboarding" className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
405405
<FormTitle
406406
LeadingIcon={<FolderIcon className="size-7 text-indigo-500" />}
407407
title="Select Project"

0 commit comments

Comments
 (0)