Remove force full width and use JS to adjust element positions if needed

src/components/elements/screen-centered.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import {HTMLAttributes, useCallback, useEffect, useRef, useState} from "react"
+import {useEventListener} from "usehooks-ts"
+
+const ScreenCentered = ({children}: HTMLAttributes<HTMLDivElement>) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const [translate, setTranslate] = useState(0)
+  const calculateTranslation = useCallback(() => setTranslate(ref.current?.getBoundingClientRect().x || 0), [])
+  useEventListener("resize", calculateTranslation)
+  useEffect(() => calculateTranslation(), [calculateTranslation])
+
+  return (
+    <div ref={ref} className="relative left-1/2 w-screen -translate-x-1/2">
+      <div style={{transform: `translate(-${translate}px)`}}>{children}</div>
+    </div>
+  )
+}
+export default ScreenCentered

src/components/nodes/pages/stanford-page/stanford-page-page.tsx

@@ -2,11 +2,7 @@ import Rows from "@components/paragraphs/rows/rows"
 import InteriorPage from "@components/layouts/interior-page"
 import {H1} from "@components/elements/headers"
 import {HtmlHTMLAttributes} from "react"
-import {
-  NodeStanfordPage,
-  NodeStanfordPageSuPageBannerUnion,
-  NodeStanfordPageSuPageComponentsUnion,
-} from "@lib/gql/__generated__/drupal.d"
+import {NodeStanfordPage, NodeStanfordPageSuPageBannerUnion} from "@lib/gql/__generated__/drupal.d"
 import PageTitleBannerParagraph from "@components/paragraphs/stanford-page-title-banner/page-title-banner-paragraph"
 import SumArcBannerParagraph from "@components/paragraphs/sum-arc-banner/sum-arc-banner-paragraph"
 import SumTopBannerParagraph from "@components/paragraphs/sum-top-banner/sum-top-banner-paragraph"
@@ -17,25 +13,13 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 }
 
 const StanfordPagePage = ({node, ...props}: Props) => {
-  // If the page contains any of the following components, force the page to be full width. This prevents the need to
-  // address the large components on "interior" pages that contain a left sidebar. It's more effort than it's worth.
-  const fullWidthComponents: NodeStanfordPageSuPageComponentsUnion["__typename"][] = [
-    "ParagraphSumTestimonial",
-    "ParagraphSumCarousel",
-    "ParagraphSumCourseFilter",
-    "ParagraphSumPillBanner",
-    "ParagraphStanfordBanner",
-  ]
   const pageTitleBanners: NodeStanfordPageSuPageBannerUnion["__typename"][] = [
     "ParagraphStanfordPageTitleBanner",
     "ParagraphSumArcBanner",
     "ParagraphSumTopBanner",
   ]
 
-  const fullWidth =
-    node.layoutSelection?.id === "stanford_basic_page_full" ||
-    !!node.suPageComponents?.find(component => fullWidthComponents.includes(component.__typename))
-
+  const fullWidth = node.layoutSelection?.id === "stanford_basic_page_full"
   const lastComponent = node.suPageComponents?.[node.suPageComponents?.length - 1]?.__typename
 
   const hasBannerOrCalculator = [

src/components/paragraphs/stanford-banner/banner-paragraph.tsx

@@ -9,6 +9,7 @@ import ActionLink from "@components/elements/action-link"
 import Link from "next/link"
 import {ArrowRightIcon} from "@heroicons/react/24/outline"
 import Image from "next/image"
+import ScreenCentered from "@components/elements/screen-centered"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   paragraph: ParagraphStanfordBanner
@@ -30,80 +31,88 @@ const BannerParagraph = ({paragraph, eagerLoadImage, ...props}: Props) => {
   const BannerWrapper: ElementType = isSection ? "section" : "div"
 
   return (
-    <BannerWrapper
-      {...props}
-      aria-labelledby={paragraph.suBannerHeader ? paragraph.id : undefined}
-      className="relative left-1/2 !mt-0 flex w-screen -translate-x-1/2 flex-col @container md:min-h-[400px] lg:block"
-    >
-      {hasCard && (
-        <div
-          className={twMerge(
-            "rs-px-5 rs-pb-8 rs-pt-10 relative mb-0 flex h-full min-h-[400px] w-full flex-col border-b-4 border-white bg-poppy-light lg:z-10 lg:w-[calc(50%_-_5rem)] lg:border-4 lg:border-y-0",
-            clsx({
-              "lg:ml-auto lg:mr-20": overlayPosition === "right",
-              "lg:ml-20 lg:mr-auto": overlayPosition !== "right",
-              "bg-olive-light": bgColor === "olive",
-              "bg-spirited-light": bgColor === "spirited",
-              "bg-spirited-dark text-white": bgColor === "spirited_dark",
-            })
-          )}
-        >
-          {paragraph.suBannerHeader && (
-            <div id={paragraph.id} className={behaviors.hero_pattern?.hide_heading ? "sr-only" : undefined}>
-              {headerTag === "h2" && <H2 className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</H2>}
-              {headerTag === "h3" && <H3 className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</H3>}
-              {headerTag === "h4" && <H4 className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</H4>}
-              {headerTag === "div" && (
-                <div className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</div>
-              )}
-            </div>
-          )}
+    <ScreenCentered>
+      <BannerWrapper
+        {...props}
+        aria-labelledby={paragraph.suBannerHeader ? paragraph.id : undefined}
+        className="!mt-0 flex flex-col @container md:min-h-[400px] lg:block"
+      >
+        {hasCard && (
+          <div
+            className={twMerge(
+              "rs-px-5 rs-pb-8 rs-pt-10 relative mb-0 flex h-full min-h-[400px] w-full flex-col border-b-4 border-white bg-poppy-light lg:z-10 lg:w-[calc(50%_-_5rem)] lg:border-4 lg:border-y-0",
+              clsx({
+                "lg:ml-auto lg:mr-20": overlayPosition === "right",
+                "lg:ml-20 lg:mr-auto": overlayPosition !== "right",
+                "bg-olive-light": bgColor === "olive",
+                "bg-spirited-light": bgColor === "spirited",
+                "bg-spirited-dark text-white": bgColor === "spirited_dark",
+              })
+            )}
+          >
+            {paragraph.suBannerHeader && (
+              <div id={paragraph.id} className={behaviors.hero_pattern?.hide_heading ? "sr-only" : undefined}>
+                {headerTag === "h2" && (
+                  <H2 className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</H2>
+                )}
+                {headerTag === "h3" && (
+                  <H3 className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</H3>
+                )}
+                {headerTag === "h4" && (
+                  <H4 className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</H4>
+                )}
+                {headerTag === "div" && (
+                  <div className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</div>
+                )}
+              </div>
+            )}
 
-          {paragraph.suBannerSupHeader && (
-            <div className="rs-mb-1 order-first text-09em font-normal uppercase">{paragraph.suBannerSupHeader}</div>
-          )}
+            {paragraph.suBannerSupHeader && (
+              <div className="rs-mb-1 order-first text-09em font-normal uppercase">{paragraph.suBannerSupHeader}</div>
+            )}
 
-          <Wysiwyg html={paragraph.suBannerBody?.processed} className="big-paragraph" />
+            <Wysiwyg html={paragraph.suBannerBody?.processed} className="big-paragraph" />
 
-          {paragraph.suBannerButton?.url && !semiCircleButton && (
-            <div className="rs-pt-2">
-              <ActionLink
-                className="btn rounded-full border-2 border-transparent bg-digital-red px-8 py-4 font-normal text-white transition hocus:border-white hocus:text-white"
-                href={paragraph.suBannerButton.url}
-              >
-                {paragraph.suBannerButton.title}
-              </ActionLink>
-            </div>
-          )}
-        </div>
-      )}
-      <div className="lg:aspect-auto relative aspect-[16/9] w-full bg-cool-grey lg:absolute lg:top-0 lg:h-full">
-        {paragraph.suBannerImage?.mediaImage && (
-          <Image
-            className="object-cover"
-            src={paragraph.suBannerImage?.mediaImage.url}
-            alt={paragraph.suBannerImage?.mediaImage.alt || ""}
-            loading={eagerLoadImage ? "eager" : "lazy"}
-            fill
-            sizes="100vw"
-          />
+            {paragraph.suBannerButton?.url && !semiCircleButton && (
+              <div className="rs-pt-2">
+                <ActionLink
+                  className="btn rounded-full border-2 border-transparent bg-digital-red px-8 py-4 font-normal text-white transition hocus:border-white hocus:text-white"
+                  href={paragraph.suBannerButton.url}
+                >
+                  {paragraph.suBannerButton.title}
+                </ActionLink>
+              </div>
+            )}
+          </div>
         )}
-        <div className="rs-pr-1 absolute top-0 z-50 flex w-screen justify-end lg:bottom-0 lg:left-0 lg:top-auto lg:justify-center lg:p-0">
-          {paragraph.suBannerButton?.url && semiCircleButton && (
-            <Link
-              className="group flex aspect-[2/1] h-fit w-[210px] items-start justify-center rounded-bl-full rounded-br-full border-4 border-b-4 border-t-0 border-white bg-spirited-dark text-white hocus:text-white md:w-[250px] lg:items-end lg:rounded-b-none lg:rounded-tl-full lg:rounded-tr-full lg:border-b-0 lg:border-t-4 2xl:w-[300px]"
-              href={paragraph.suBannerButton.url}
-            >
-              <span className="sr-only">{paragraph.suBannerButton.title}</span>
-              <ArrowRightIcon
-                width={60}
-                className="mt-10 inline-block w-[45px] border-b-2 border-transparent group-hocus:border-white lg:mb-10 lg:mt-0 2xl:mb-16 2xl:w-[60px]"
-              />
-            </Link>
+        <div className="lg:aspect-auto relative aspect-[16/9] w-full bg-cool-grey lg:absolute lg:top-0 lg:h-full">
+          {paragraph.suBannerImage?.mediaImage && (
+            <Image
+              className="object-cover"
+              src={paragraph.suBannerImage?.mediaImage.url}
+              alt={paragraph.suBannerImage?.mediaImage.alt || ""}
+              loading={eagerLoadImage ? "eager" : "lazy"}
+              fill
+              sizes="100vw"
+            />
           )}
+          <div className="rs-pr-1 absolute top-0 z-50 flex w-screen justify-end lg:bottom-0 lg:left-0 lg:top-auto lg:justify-center lg:p-0">
+            {paragraph.suBannerButton?.url && semiCircleButton && (
+              <Link
+                className="group flex aspect-[2/1] h-fit w-[210px] items-start justify-center rounded-bl-full rounded-br-full border-4 border-b-4 border-t-0 border-white bg-spirited-dark text-white hocus:text-white md:w-[250px] lg:items-end lg:rounded-b-none lg:rounded-tl-full lg:rounded-tr-full lg:border-b-0 lg:border-t-4 2xl:w-[300px]"
+                href={paragraph.suBannerButton.url}
+              >
+                <span className="sr-only">{paragraph.suBannerButton.title}</span>
+                <ArrowRightIcon
+                  width={60}
+                  className="mt-10 inline-block w-[45px] border-b-2 border-transparent group-hocus:border-white lg:mb-10 lg:mt-0 2xl:mb-16 2xl:w-[60px]"
+                />
+              </Link>
+            )}
+          </div>
         </div>
-      </div>
-    </BannerWrapper>
+      </BannerWrapper>
+    </ScreenCentered>
   )
 }
 export default BannerParagraph

src/components/paragraphs/sum-carousel/sum-carousel-paragraph.tsx

@@ -14,6 +14,7 @@ import ArcBanner from "@components/patterns/arc-banner"
 import {getParagraphBehaviors} from "../get-paragraph-behaviors"
 import clsx from "clsx"
 import {twMerge} from "tailwind-merge"
+import ScreenCentered from "@components/elements/screen-centered"
 
 type Props = HTMLAttributes<HTMLElement> & {
   paragraph: ParagraphSumCarousel
@@ -26,50 +27,52 @@ const SumCarouselParagraph = ({paragraph, ...props}: Props) => {
   const Element = paragraph.sumCarouselHeader ? "article" : "div"
 
   return (
-    <Element {...props} aria-labelledby={paragraph.sumCarouselHeader ? paragraph.id : undefined}>
-      {isArcBanner && (
-        <ArcBanner isBorder>
+    <ScreenCentered>
+      <Element {...props} aria-labelledby={paragraph.sumCarouselHeader ? paragraph.id : undefined}>
+        {isArcBanner && (
+          <ArcBanner isBorder>
+            <CarouselTop
+              header={paragraph.sumCarouselHeader}
+              superHeader={paragraph.sumCarouselSuperheader}
+              headingSize={headingSize}
+              description={paragraph.sumCarouselDescription?.processed}
+              link={paragraph.sumCarouselLink}
+              className="md:rs-mt-7"
+              headerId={paragraph.id}
+            />
+          </ArcBanner>
+        )}
+
+        {!isArcBanner && (
           <CarouselTop
             header={paragraph.sumCarouselHeader}
             superHeader={paragraph.sumCarouselSuperheader}
             headingSize={headingSize}
             description={paragraph.sumCarouselDescription?.processed}
             link={paragraph.sumCarouselLink}
-            className="md:rs-mt-7"
             headerId={paragraph.id}
           />
-        </ArcBanner>
-      )}
-
-      {!isArcBanner && (
-        <CarouselTop
-          header={paragraph.sumCarouselHeader}
-          superHeader={paragraph.sumCarouselSuperheader}
-          headingSize={headingSize}
-          description={paragraph.sumCarouselDescription?.processed}
-          link={paragraph.sumCarouselLink}
-          headerId={paragraph.id}
-        />
-      )}
+        )}
 
-      {paragraph.sumCarouselSlides && (
-        <div className="relative left-1/2 mb-32 mt-0 w-screen -translate-x-1/2">
-          <Slideshow className="mx-auto w-[calc(100%-50px)] xl:w-[calc(100%-150px)]">
-            {paragraph.sumCarouselSlides.map((slide, slideIndex) => {
-              return (
-                <CarouselSlide
-                  key={slide.id}
-                  slide={slide}
-                  slideNumber={slideIndex + 1}
-                  totalSlides={paragraph.sumCarouselSlides?.length || 0}
-                  slideHeader={paragraph.sumCarouselHeader ? "h3" : "h2"}
-                />
-              )
-            })}
-          </Slideshow>
-        </div>
-      )}
-    </Element>
+        {paragraph.sumCarouselSlides && (
+          <div className="mb-32 mt-0">
+            <Slideshow className="mx-auto w-[calc(100%-50px)] xl:w-[calc(100%-150px)]">
+              {paragraph.sumCarouselSlides.map((slide, slideIndex) => {
+                return (
+                  <CarouselSlide
+                    key={slide.id}
+                    slide={slide}
+                    slideNumber={slideIndex + 1}
+                    totalSlides={paragraph.sumCarouselSlides?.length || 0}
+                    slideHeader={paragraph.sumCarouselHeader ? "h3" : "h2"}
+                  />
+                )
+              })}
+            </Slideshow>
+          </div>
+        )}
+      </Element>
+    </ScreenCentered>
   )
 }