Merge pull request #19478 from mozilla/split-layout-width-reduction

fix(cms): Add max-width for split layout content

Author: LZoog

packages/fxa-settings/src/components/AppLayout/index.stories.tsx

@@ -195,7 +195,21 @@ export const WithCmsSplitLayoutBackgroundImageHeaderBackground = () => {
   return (
     <AppLayout cmsInfo={mockCmsInfo} splitLayout>
       <h1 className="card-header">Header content</h1>
-      <p className="mt-2">Paragraph content here</p>
+      <p className="mt-2">
+        Lots of text so we can see the max-width! Croissant cookie sesame snaps
+        cake muffin chupa chups jelly-o candy. Chocolate bar chocolate sesame
+        snaps fruitcake pudding danish. Donut marzipan shortbread jelly-o
+        shortbread danish. Topping biscuit macaroon donut sugar plum candy
+        dragée. Tart chupa chups jelly-o gummies oat cake dessert chocolate
+        sweet roll. Danish pie cookie candy candy canes cotton candy gummi
+        bears. Cake jelly-o cake cotton candy powder tart. Pastry tiramisu candy
+        canes pie shortbread. Bear claw carrot cake fruitcake donut icing cotton
+        candy. Donut ice cream chocolate bar pie halvah cake lemon drops muffin.
+        Bonbon brownie biscuit cake cake jujubes.
+      </p>
+      <div className="flex mt-5">
+        <button className="cta-primary cta-xl">I am a button</button>
+      </div>
     </AppLayout>
   );
 };

packages/fxa-settings/src/components/AppLayout/index.tsx

@@ -147,7 +147,7 @@ export const AppLayout = ({
               }
             />
             <main className="mobileLandscape:items-center tablet:flex-1 tablet:bg-white py-8 px-6 tablet:px-10 mobileLandscape:py-9 tablet:ml-auto flex justify-center flex-1">
-              <section>{children}</section>
+              <section className="max-w-120">{children}</section>
             </main>
           </div>
         )}
@@ -157,7 +157,7 @@ export const AppLayout = ({
           <div className="fixed bottom-6 left-6 z-10">
             <LocaleToggle />
           </div>
-      </footer>
+        </footer>
       )}
       <div id="body-bottom" className="w-full block mobileLandscape:hidden" />
     </>