Fix component width

apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client.tsx

@@ -110,8 +110,8 @@ export default function PageClient () {
             <div className="w-full">
               <BrowserFrame url="your-website.com/signin">
                 <div className="flex flex-col items-center justify-center min-h-[400px]">
-                  <div className='w-full sm:max-w-xs m-auto scale-90' inert=''>
-                    {/* a transparent cover that prevents the card being clicked */}
+                  <div className='w-full sm:max-w-xs m-auto scale-90 pointer-events-none' inert=''>
+                    {/* a transparent cover that prevents the card from being clicked, even when pointer-events is overridden */}
                     <div className="absolute inset-0 bg-transparent z-10"></div>
                     <AuthPage
                       type="sign-in"

packages/stack/src/components-page/auth-page.tsx

@@ -57,7 +57,7 @@ export function AuthPage(props: {
 
   return (
     <MaybeFullPage fullPage={!!props.fullPage}>
-      <div className='stack-scope flex flex-col items-stretch' style={{ width: '380px', padding: props.fullPage ? '1rem' : 0 }}>
+      <div className='stack-scope flex flex-col items-stretch' style={{ maxWidth: '380px', flexBasis: '380px', padding: props.fullPage ? '1rem' : 0 }}>
         <div className="text-center mb-6">
           <Typography type='h2'>
             {props.type === 'sign-in' ? t("Sign in to your account") : t("Create a new account")}
@@ -112,4 +112,4 @@ export function AuthPage(props: {
       </div>
     </MaybeFullPage>
   );
-}
+}

packages/stack/src/components-page/forgot-password.tsx

@@ -77,7 +77,7 @@ export function ForgotPassword(props: { fullPage?: boolean }) {
   return (
     <MaybeFullPage fullPage={!!props.fullPage}>
       <div className={cn(
-        "stack-scope w-[380px]",
+        "stack-scope max-w-[380px] flex-basis-[380px]",
         props.fullPage ? "p-4" : "p-0"
       )}>
         <div className="text-center">

packages/stack/src/components-page/password-reset.tsx

@@ -78,7 +78,7 @@ export default function PasswordResetForm(props: {
   return (
     <MaybeFullPage fullPage={!!props.fullPage}>
       <div className={cn(
-        "flex flex-col items-stretch w-[380px]",
+        "flex flex-col items-stretch max-w-[380px] flex-basis-[380px]",
         props.fullPage ? "p-4" : "p-0"
       )}>
         <div className="text-center mb-6">

packages/stack/src/components-page/team-creation.tsx

@@ -46,7 +46,7 @@ export function TeamCreation(props: { fullPage?: boolean }) {
 
   return (
     <MaybeFullPage fullPage={!!props.fullPage}>
-      <div className='stack-scope flex flex-col items-stretch' style={{ width: '380px', padding: props.fullPage ? '1rem' : 0 }}>
+      <div className='stack-scope flex flex-col items-stretch' style={{ maxWidth: '380px', flexBasis: '380px', padding: props.fullPage ? '1rem' : 0 }}>
         <div className="text-center mb-6">
           <Typography type='h2'>
             {t('Create a Team')}

packages/stack/src/components/message-cards/message-card.tsx

@@ -18,7 +18,7 @@ export function MessageCard(
 ) {
   return (
     <MaybeFullPage fullPage={fullPage}>
-      <div className="text-center stack-scope flex flex-col gap-4" style={{ width: '380px', padding: fullPage ? '1rem' : 0 }}>
+      <div className="text-center stack-scope flex flex-col gap-4" style={{ maxWidth: '380px', flexBasis: '380px', padding: fullPage ? '1rem' : 0 }}>
         <Typography type='h3'>{props.title}</Typography>
         {props.children}
         {(props.primaryButtonText || props.secondaryButtonText) && (