added close button for dog message on small screens

Author: joemacd

src/sections/About/AboutSection.jsx

@@ -56,12 +56,20 @@ export default function AboutSection() {
 
   const [isBubbleHidden, setIsBubbleHidden] = useState(false);
 
+  //add a mobile flag (updates on resize)
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+  useEffect(() => {
+    const onResize = () => setIsMobile(window.innerWidth <= 768);
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
   //Handle dog scale according to the width of the screen
   const [dogScale, setDogScale] = useState(getScaleForWidth(window.innerWidth));
   function getScaleForWidth(width) {
-    if (width < 480) {
+    if (width <= 480) {
       return 1.5;
-    } else if (width < 768) {
+    } else if (width <= 768) {
       return 2.0;
     } else {
       return 2.5;
@@ -185,12 +193,26 @@ export default function AboutSection() {
                   data-direction={direction}
                   style={
                     direction === 1
-                      ? window.innerWidth < 768
+                      ? window.innerWidth <= 768
                         ? { left: `${MOUTH_X - 100}px` }
                         : { left: `${MOUTH_X}px` }
                       : { left: `${MOUTH_X - 48}px` }
                   }
                 >
+                  {/* close button (only shown on small screens) */}
+                  <button
+                    type="button"
+                    className={styles.bubbleClose}
+                    aria-label={
+                      isBubbleHidden ? "Show message" : "Hide message"
+                    }
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setIsBubbleHidden((v) => !v);
+                    }}
+                  >
+                    ×
+                  </button>
                   <strong style={{ fontSize: 15 }}>
                     {dogBubbles[selectedPanel].title}
                   </strong>

src/sections/About/AboutSection.module.css

@@ -116,6 +116,9 @@
   text-align: center;
   font-size: 0.875rem;
   line-height: 1.2;
+
+  /* make children absolute (i.e., close button) */
+  position: absolute;
 }
 
 .bubble p {
@@ -142,6 +145,49 @@
   left: 80%;
 }
 
+/* close button */
+.bubbleClose {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 28px;
+  height: 28px;
+  border: 1px solid #111827;
+  border-radius: 6px;
+  background: #fff;
+  color: #111827;
+  font-size: 20px;
+  line-height: 24px;
+  padding: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.bubbleClose:active {
+  transform: scale(0.96);
+}
+
+/* show the X on mobile/tablet only */
+@media (max-width: 768px) {
+  .bubbleClose {
+    display: inline-flex;
+    position: absolute;
+    top: -12px;
+    right: -12px;
+    width: 28px;
+    height: 28px;
+    border-radius: 999px;
+    border: 2px solid #111827;
+    background: #fff;
+    color: #111827;
+    font-size: 18px;
+    line-height: 1;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+  }
+}
+
 .panels {
   display: flex;
   gap: 2rem;