From cb12ae831cea8bc620dcee76992ffd3b10d72e1e Mon Sep 17 00:00:00 2001
From: Cooper Labinger <clabinger@gmail.com>
Date: Wed, 7 Jul 2021 01:12:25 -0400
Subject: [PATCH 1/2] Prevent hidden overflow of GlassCase

Flexbox containers with fixed-width content and `overflow-x: auto; justify-content: center` get cut off on the left side when the content is wider than the container.

Moving the `w-100` and `justify-content-center` classes to a wrapper `<div>` allows the scrollbar to reach all of the content.
---
 src/components/sections/Families/GlassCase.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/sections/Families/GlassCase.tsx b/src/components/sections/Families/GlassCase.tsx
index 84af6448..eb69aebc 100644
--- a/src/components/sections/Families/GlassCase.tsx
+++ b/src/components/sections/Families/GlassCase.tsx
@@ -27,10 +27,12 @@ export default function GlassCase(): ReactElement {
           lasting memories.
         </span>
       </div>
-      <div className="d-flex flex-row w-100 justify-content-center mt-5 scrolling-wrapper-flexbox">
-        {CARDS.map((card) => (
-          <GlassCaseCard name={card.name} image={card.image} />
-        ))}
+      <div className="d-flex w-100 justify-content-center">
+        <div className="d-flex flex-row mt-5 scrolling-wrapper-flexbox">
+          {CARDS.map((card) => (
+            <GlassCaseCard name={card.name} image={card.image} />
+          ))}
+        </div>
       </div>
     </section>
   );

From d408d33bc6b53014fc2611365408e77fd79b3daa Mon Sep 17 00:00:00 2001
From: Cooper Labinger <clabinger@gmail.com>
Date: Wed, 7 Jul 2021 01:34:50 -0400
Subject: [PATCH 2/2] Scroll GlassCase to center on render

The GlassCase element was always initially centered before commit cb12ae8.

Scroll the element to the center on render to preserve the original look, while allowing all child elements to be seen.
---
 src/components/sections/Families/GlassCase.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/sections/Families/GlassCase.tsx b/src/components/sections/Families/GlassCase.tsx
index eb69aebc..b9a67556 100644
--- a/src/components/sections/Families/GlassCase.tsx
+++ b/src/components/sections/Families/GlassCase.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, useEffect } from "react";
 import GlassCaseCard, {
   GlassCaseCardProps,
 } from "src/components/cards/GlassCaseCard";
@@ -16,9 +16,20 @@ export default function GlassCase(): ReactElement {
     { name: "Beautiful", image: Scenery },
     { name: "Fun", image: Game },
   ];
+  
+  const scroller = React.createRef();
+  const scrollToCenter = () => {
+    const element = scroller.current;
+    element.scrollLeft = (element.scrollWidth - element.offsetWidth) / 2;
+  }
+
+  useEffect(() => {
+    scrollToCenter();
+  });
+
   return (
     <section className="d-flex blue-200-bg flex-column align-items-center py-5">
-      <div className="d-flex flex-column justify-content-center text-center px-3">
+      <div className="d-flex flex-column justify-content-center text-center px-3" ref={scroller}>
         <span className="dark p2 font-weight-bold">
           Always stay close, no matter the distance.
         </span>