From e9755186007e88b3dda4e1e7db59eb4922a0f44b Mon Sep 17 00:00:00 2001
From: Emma Mansell <emilymansell@nypl.org>
Date: Tue, 10 Oct 2023 11:47:53 -0400
Subject: [PATCH] Fixing 2xl breakout width

---
 .../FeaturedContent/FeaturedContent.tsx       |  26 +-
 .../FeaturedContent.test.tsx.snap             | 480 +++++++++---------
 src/theme/components/featuredContent.ts       |  17 +-
 3 files changed, 276 insertions(+), 247 deletions(-)

diff --git a/src/components/FeaturedContent/FeaturedContent.tsx b/src/components/FeaturedContent/FeaturedContent.tsx
index d537c7e25c..7ffd93e488 100644
--- a/src/components/FeaturedContent/FeaturedContent.tsx
+++ b/src/components/FeaturedContent/FeaturedContent.tsx
@@ -83,19 +83,21 @@ export const FeaturedContent = chakra(
 
       return (
         <Box data-testid="featuredcontent" __css={styles}>
-          <Box
-            data-testid="featuredcontent-bg-image"
-            __css={{
-              ...styles.imgWrapper,
-              backgroundImage: `url(${imageProps.src})`,
-            }}
-          >
-            <FeaturedContentImage
-              alt={imageProps.alt}
-              src={imageProps.src ? imageProps.src : undefined}
-            />
+          <Box __css={styles.wrapper}>
+            <Box
+              data-testid="featuredcontent-bg-image"
+              __css={{
+                ...styles.imgWrapper,
+                backgroundImage: `url(${imageProps.src})`,
+              }}
+            >
+              <FeaturedContentImage
+                alt={imageProps.alt}
+                src={imageProps.src ? imageProps.src : undefined}
+              />
+            </Box>
+            <Box __css={styles.text}>{textContent}</Box>
           </Box>
-          <Box __css={styles.text}>{textContent}</Box>
         </Box>
       );
     }
diff --git a/src/components/FeaturedContent/__snapshots__/FeaturedContent.test.tsx.snap b/src/components/FeaturedContent/__snapshots__/FeaturedContent.test.tsx.snap
index 40d6121fb4..f5c18147fe 100644
--- a/src/components/FeaturedContent/__snapshots__/FeaturedContent.test.tsx.snap
+++ b/src/components/FeaturedContent/__snapshots__/FeaturedContent.test.tsx.snap
@@ -6,52 +6,56 @@ exports[`Renders the UI snapshot correctly 1`] = `
   data-testid="featuredcontent"
 >
   <div
-    className="css-1gt4hjv"
-    data-testid="featuredcontent-bg-image"
+    className="css-0"
   >
     <div
-      className="css-0"
+      className="css-1gt4hjv"
+      data-testid="featuredcontent-bg-image"
     >
-      <img
-        alt="Image example"
-        className="css-0"
-        src="//placekitten.com/800/400"
-      />
-    </div>
-  </div>
-  <div
-    className="css-0"
-  >
-    <div>
-      <br />
-      <hgroup
-        aria-roledescription="Heading group"
+      <div
         className="css-0"
-        role="group"
       >
-        <p
-          aria-roledescription="Overline"
-          className="chakra-text css-rwceap"
-          role="paragraph"
+        <img
+          alt="Image example"
+          className="css-0"
+          src="//placekitten.com/800/400"
+        />
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div>
+        <br />
+        <hgroup
+          aria-roledescription="Heading group"
+          className="css-0"
+          role="group"
         >
-          Featured
+          <p
+            aria-roledescription="Overline"
+            className="chakra-text css-rwceap"
+            role="paragraph"
+          >
+            Featured
+          </p>
+          <h1
+            className="chakra-heading css-eyyo6e"
+          >
+            Spotlight on the Public Domain
+          </h1>
+        </hgroup>
+        <p>
+          The New York Public Library recently enhanced access to all public domain items in Digital Collections so that everyone has the freedom to enjoy and reuse these materials in almost limitless ways.
         </p>
-        <h1
-          className="chakra-heading css-eyyo6e"
+        <button
+          className="chakra-button css-1xdhyk6"
+          id="test"
+          type="button"
         >
-          Spotlight on the Public Domain
-        </h1>
-      </hgroup>
-      <p>
-        The New York Public Library recently enhanced access to all public domain items in Digital Collections so that everyone has the freedom to enjoy and reuse these materials in almost limitless ways.
-      </p>
-      <button
-        className="chakra-button css-1xdhyk6"
-        id="test"
-        type="button"
-      >
-         Discover more 
-      </button>
+           Discover more 
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -63,52 +67,56 @@ exports[`Renders the UI snapshot correctly 2`] = `
   data-testid="featuredcontent"
 >
   <div
-    className="css-1gt4hjv"
-    data-testid="featuredcontent-bg-image"
+    className="css-0"
   >
     <div
-      className="css-0"
+      className="css-1gt4hjv"
+      data-testid="featuredcontent-bg-image"
     >
-      <img
-        alt="Image example"
+      <div
         className="css-0"
-        src="//placekitten.com/800/400"
-      />
-    </div>
-  </div>
-  <div
-    className="css-0"
-  >
-    <div>
-      <br />
-      <hgroup
-        aria-roledescription="Heading group"
-        className="css-0"
-        role="group"
       >
-        <p
-          aria-roledescription="Overline"
-          className="chakra-text css-rwceap"
-          role="paragraph"
+        <img
+          alt="Image example"
+          className="css-0"
+          src="//placekitten.com/800/400"
+        />
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div>
+        <br />
+        <hgroup
+          aria-roledescription="Heading group"
+          className="css-0"
+          role="group"
         >
-          Featured
+          <p
+            aria-roledescription="Overline"
+            className="chakra-text css-rwceap"
+            role="paragraph"
+          >
+            Featured
+          </p>
+          <h1
+            className="chakra-heading css-eyyo6e"
+          >
+            Spotlight on the Public Domain
+          </h1>
+        </hgroup>
+        <p>
+          The New York Public Library recently enhanced access to all public domain items in Digital Collections so that everyone has the freedom to enjoy and reuse these materials in almost limitless ways.
         </p>
-        <h1
-          className="chakra-heading css-eyyo6e"
+        <button
+          className="chakra-button css-1xdhyk6"
+          id="test"
+          type="button"
         >
-          Spotlight on the Public Domain
-        </h1>
-      </hgroup>
-      <p>
-        The New York Public Library recently enhanced access to all public domain items in Digital Collections so that everyone has the freedom to enjoy and reuse these materials in almost limitless ways.
-      </p>
-      <button
-        className="chakra-button css-1xdhyk6"
-        id="test"
-        type="button"
-      >
-         Discover more 
-      </button>
+           Discover more 
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -120,52 +128,56 @@ exports[`Renders the UI snapshot correctly 3`] = `
   data-testid="featuredcontent"
 >
   <div
-    className="css-1gt4hjv"
-    data-testid="featuredcontent-bg-image"
+    className="css-0"
   >
     <div
-      className="css-0"
+      className="css-1gt4hjv"
+      data-testid="featuredcontent-bg-image"
     >
-      <img
-        alt="Image example"
+      <div
         className="css-0"
-        src="//placekitten.com/800/400"
-      />
-    </div>
-  </div>
-  <div
-    className="css-0"
-  >
-    <div>
-      <br />
-      <hgroup
-        aria-roledescription="Heading group"
-        className="css-0"
-        role="group"
       >
-        <p
-          aria-roledescription="Overline"
-          className="chakra-text css-rwceap"
-          role="paragraph"
+        <img
+          alt="Image example"
+          className="css-0"
+          src="//placekitten.com/800/400"
+        />
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div>
+        <br />
+        <hgroup
+          aria-roledescription="Heading group"
+          className="css-0"
+          role="group"
         >
-          Featured
+          <p
+            aria-roledescription="Overline"
+            className="chakra-text css-rwceap"
+            role="paragraph"
+          >
+            Featured
+          </p>
+          <h1
+            className="chakra-heading css-eyyo6e"
+          >
+            Spotlight on the Public Domain
+          </h1>
+        </hgroup>
+        <p>
+          The New York Public Library recently enhanced access to all public domain items in Digital Collections so that everyone has the freedom to enjoy and reuse these materials in almost limitless ways.
         </p>
-        <h1
-          className="chakra-heading css-eyyo6e"
+        <button
+          className="chakra-button css-1xdhyk6"
+          id="test"
+          type="button"
         >
-          Spotlight on the Public Domain
-        </h1>
-      </hgroup>
-      <p>
-        The New York Public Library recently enhanced access to all public domain items in Digital Collections so that everyone has the freedom to enjoy and reuse these materials in almost limitless ways.
-      </p>
-      <button
-        className="chakra-button css-1xdhyk6"
-        id="test"
-        type="button"
-      >
-         Discover more 
-      </button>
+           Discover more 
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -177,52 +189,56 @@ exports[`Renders the UI snapshot correctly 4`] = `
   data-testid="featuredcontent"
 >
   <div
-    className="css-1gt4hjv"
-    data-testid="featuredcontent-bg-image"
+    className="css-0"
   >
     <div
-      className="css-0"
+      className="css-1gt4hjv"
+      data-testid="featuredcontent-bg-image"
     >
-      <img
-        alt="Image example"
-        className="css-0"
-        src="//placekitten.com/800/400"
-      />
-    </div>
-  </div>
-  <div
-    className="css-0"
-  >
-    <div>
-      <br />
-      <hgroup
-        aria-roledescription="Heading group"
+      <div
         className="css-0"
-        role="group"
       >
-        <p
-          aria-roledescription="Overline"
-          className="chakra-text css-rwceap"
-          role="paragraph"
+        <img
+          alt="Image example"
+          className="css-0"
+          src="//placekitten.com/800/400"
+        />
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div>
+        <br />
+        <hgroup
+          aria-roledescription="Heading group"
+          className="css-0"
+          role="group"
         >
-          Featured
+          <p
+            aria-roledescription="Overline"
+            className="chakra-text css-rwceap"
+            role="paragraph"
+          >
+            Featured
+          </p>
+          <h1
+            className="chakra-heading css-eyyo6e"
+          >
+            Spotlight on the Public Domain
+          </h1>
+        </hgroup>
+        <p>
+          The New York Public Library recently enhanced access to all public domain items in Digital Collections so that everyone has the freedom to enjoy and reuse these materials in almost limitless ways.
         </p>
-        <h1
-          className="chakra-heading css-eyyo6e"
+        <button
+          className="chakra-button css-1xdhyk6"
+          id="test"
+          type="button"
         >
-          Spotlight on the Public Domain
-        </h1>
-      </hgroup>
-      <p>
-        The New York Public Library recently enhanced access to all public domain items in Digital Collections so that everyone has the freedom to enjoy and reuse these materials in almost limitless ways.
-      </p>
-      <button
-        className="chakra-button css-1xdhyk6"
-        id="test"
-        type="button"
-      >
-         Discover more 
-      </button>
+           Discover more 
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -234,52 +250,56 @@ exports[`Renders the UI snapshot correctly 5`] = `
   data-testid="featuredcontent"
 >
   <div
-    className="css-1gt4hjv"
-    data-testid="featuredcontent-bg-image"
+    className="css-0"
   >
     <div
-      className="css-0"
+      className="css-1gt4hjv"
+      data-testid="featuredcontent-bg-image"
     >
-      <img
-        alt="Image example"
+      <div
         className="css-0"
-        src="//placekitten.com/800/400"
-      />
-    </div>
-  </div>
-  <div
-    className="css-0"
-  >
-    <div>
-      <br />
-      <hgroup
-        aria-roledescription="Heading group"
-        className="css-0"
-        role="group"
       >
-        <p
-          aria-roledescription="Overline"
-          className="chakra-text css-rwceap"
-          role="paragraph"
+        <img
+          alt="Image example"
+          className="css-0"
+          src="//placekitten.com/800/400"
+        />
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div>
+        <br />
+        <hgroup
+          aria-roledescription="Heading group"
+          className="css-0"
+          role="group"
         >
-          Featured
+          <p
+            aria-roledescription="Overline"
+            className="chakra-text css-rwceap"
+            role="paragraph"
+          >
+            Featured
+          </p>
+          <h1
+            className="chakra-heading css-eyyo6e"
+          >
+            Spotlight on the Public Domain
+          </h1>
+        </hgroup>
+        <p>
+          The New York Public Library recently enhanced access to all public domain items in Digital Collections so that everyone has the freedom to enjoy and reuse these materials in almost limitless ways.
         </p>
-        <h1
-          className="chakra-heading css-eyyo6e"
+        <button
+          className="chakra-button css-1xdhyk6"
+          id="test"
+          type="button"
         >
-          Spotlight on the Public Domain
-        </h1>
-      </hgroup>
-      <p>
-        The New York Public Library recently enhanced access to all public domain items in Digital Collections so that everyone has the freedom to enjoy and reuse these materials in almost limitless ways.
-      </p>
-      <button
-        className="chakra-button css-1xdhyk6"
-        id="test"
-        type="button"
-      >
-         Discover more 
-      </button>
+           Discover more 
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -291,52 +311,56 @@ exports[`Renders the UI snapshot correctly 6`] = `
   data-testid="featuredcontent"
 >
   <div
-    className="css-1gt4hjv"
-    data-testid="featuredcontent-bg-image"
+    className="css-0"
   >
     <div
-      className="css-0"
+      className="css-1gt4hjv"
+      data-testid="featuredcontent-bg-image"
     >
-      <img
-        alt="Image example"
+      <div
         className="css-0"
-        src="//placekitten.com/800/400"
-      />
-    </div>
-  </div>
-  <div
-    className="css-0"
-  >
-    <div>
-      <br />
-      <hgroup
-        aria-roledescription="Heading group"
-        className="css-0"
-        role="group"
       >
-        <p
-          aria-roledescription="Overline"
-          className="chakra-text css-rwceap"
-          role="paragraph"
+        <img
+          alt="Image example"
+          className="css-0"
+          src="//placekitten.com/800/400"
+        />
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div>
+        <br />
+        <hgroup
+          aria-roledescription="Heading group"
+          className="css-0"
+          role="group"
         >
-          Featured
+          <p
+            aria-roledescription="Overline"
+            className="chakra-text css-rwceap"
+            role="paragraph"
+          >
+            Featured
+          </p>
+          <h1
+            className="chakra-heading css-eyyo6e"
+          >
+            Spotlight on the Public Domain
+          </h1>
+        </hgroup>
+        <p>
+          The New York Public Library recently enhanced access to all public domain items in Digital Collections so that everyone has the freedom to enjoy and reuse these materials in almost limitless ways.
         </p>
-        <h1
-          className="chakra-heading css-eyyo6e"
+        <button
+          className="chakra-button css-1xdhyk6"
+          id="test"
+          type="button"
         >
-          Spotlight on the Public Domain
-        </h1>
-      </hgroup>
-      <p>
-        The New York Public Library recently enhanced access to all public domain items in Digital Collections so that everyone has the freedom to enjoy and reuse these materials in almost limitless ways.
-      </p>
-      <button
-        className="chakra-button css-1xdhyk6"
-        id="test"
-        type="button"
-      >
-         Discover more 
-      </button>
+           Discover more 
+        </button>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/theme/components/featuredContent.ts b/src/theme/components/featuredContent.ts
index 1bbcdbdee0..d9f891e0e4 100644
--- a/src/theme/components/featuredContent.ts
+++ b/src/theme/components/featuredContent.ts
@@ -30,7 +30,6 @@ const FeaturedContent = {
       _dark: {
         bgColor: "dark.ui.bg.default",
       },
-      ...wrapperStyles,
       width: full ? "100vw" : "100%",
       left: full ? "50%" : "auto",
       right: full ? "50%" : "auto",
@@ -38,12 +37,16 @@ const FeaturedContent = {
       position: full ? "relative" : "auto",
       marginLeft: full ? "-50vw" : "auto",
       marginRight: full ? "-50vw" : "auto",
-      minHeight: "320px",
-      display: "flex",
-      alignItems: "stretch",
-      flexDirection: imageAtEnd
-        ? { sm: "column-reverse", md: "row-reverse" }
-        : { sm: "column", md: "row" },
+      wrapper: {
+        ...wrapperStyles,
+        minHeight: "320px",
+        maxWidth: "1280px",
+        display: "flex",
+        alignItems: "stretch",
+        flexDirection: imageAtEnd
+          ? { sm: "column-reverse", md: "row-reverse" }
+          : { sm: "column", md: "row" },
+      },
       text: {
         display: "flex",
         padding: "20px",