Responsive work for the onboarding screens

Author: samejr

apps/webapp/app/components/BackgroundWrapper.tsx

@@ -5,10 +5,9 @@ import blurredDashboardBackgroundTable from "~/assets/images/blurred-dashboard-b
 
 export function BackgroundWrapper({ children }: { children: ReactNode }) {
   return (
-    <div className="relative h-full w-full overflow-hidden">
-      {/* Left menu top background - fixed width 260px, maintains aspect ratio */}
+    <div className="relative h-full w-full overflow-hidden bg-background-dimmed lg:bg-transparent">
       <div
-        className="absolute left-0 top-0 w-[260px] bg-contain bg-left-top bg-no-repeat"
+        className="absolute left-0 top-0 hidden w-[260px] bg-contain bg-left-top bg-no-repeat lg:block"
         style={{
           backgroundImage: `url(${blurredDashboardBackgroundMenuTop})`,
           aspectRatio: "auto",
@@ -17,9 +16,8 @@ export function BackgroundWrapper({ children }: { children: ReactNode }) {
         }}
       />
 
-      {/* Left menu bottom background - fixed width 260px, maintains aspect ratio */}
       <div
-        className="absolute bottom-0 left-0 w-[260px] bg-contain bg-left-bottom bg-no-repeat"
+        className="absolute bottom-0 left-0 hidden w-[260px] bg-contain bg-left-bottom bg-no-repeat lg:block"
         style={{
           backgroundImage: `url(${blurredDashboardBackgroundMenuBottom})`,
           aspectRatio: "auto",
@@ -28,9 +26,8 @@ export function BackgroundWrapper({ children }: { children: ReactNode }) {
         }}
       />
 
-      {/* Right table background - fixed width 2000px, positioned next to menu */}
       <div
-        className="absolute top-0 bg-left-top bg-no-repeat"
+        className="absolute top-0 hidden bg-left-top bg-no-repeat lg:block"
         style={{
           left: "260px",
           backgroundImage: `url(${blurredDashboardBackgroundTable})`,
@@ -41,7 +38,6 @@ export function BackgroundWrapper({ children }: { children: ReactNode }) {
         }}
       />
 
-      {/* Content layer */}
       <div className="relative z-10 h-full w-full">{children}</div>
     </div>
   );

apps/webapp/app/components/LoginPageLayout.tsx

@@ -46,10 +46,10 @@ export function LoginPageLayout({ children }: { children: React.ReactNode }) {
   }, []);
 
   return (
-    <main className="grid h-full grid-cols-1 md:grid-cols-2">
-      <div className="border-r border-grid-bright bg-background-bright">
-        <div className="flex h-full flex-col items-center justify-between p-6">
-          <div className="flex w-full items-center justify-between">
+    <main className="grid h-full grid-cols-1 lg:grid-cols-2">
+      <div className="bg-background-dimmed lg:border-r lg:border-grid-bright lg:bg-background-bright">
+        <div className="flex h-full flex-col items-center justify-center p-6 lg:justify-between">
+          <div className="hidden w-full items-center justify-between lg:flex">
             <a href="https://trigger.dev">
               <LogoType className="w-36" />
             </a>
@@ -62,13 +62,13 @@ export function LoginPageLayout({ children }: { children: React.ReactNode }) {
             </LinkButton>
           </div>
           <div className="flex h-full max-w-sm items-center justify-center">{children}</div>
-          <Paragraph variant="small" className="text-center">
+          <Paragraph variant="small" className="hidden text-center lg:block">
             Having login issues? <TextLink href="https://@trigger.dev/contact">Email us</TextLink>{" "}
             or <TextLink href="https://trigger.dev/discord">ask us in Discord</TextLink>
           </Paragraph>
         </div>
       </div>
-      <div className="hidden grid-rows-[1fr_auto] pb-6 md:grid">
+      <div className="hidden grid-rows-[1fr_auto] pb-6 lg:grid">
         <div className="flex h-full flex-col items-center justify-center px-16">
           <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">
             {randomQuote?.quote}

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

@@ -65,8 +65,8 @@ export function MainCenteredContainer({
   className?: string;
 }) {
   return (
-    <div className="h-full w-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-      <div className={cn("mx-auto mt-6 max-w-xs overflow-y-auto p-1 md:mt-[22vh]", className)}>
+    <div className="flex h-full w-full items-center justify-center overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 lg:items-start lg:p-0">
+      <div className={cn("mx-auto max-w-xs overflow-y-auto p-1 lg:mt-[22vh]", className)}>
         {children}
       </div>
     </div>