From 66dc1e0f00eca2566a5b49cc158e0d696857b907 Mon Sep 17 00:00:00 2001
From: Matt Yoder <mjyoder@psc.edu>
Date: Tue, 5 Nov 2024 09:44:25 -0500
Subject: [PATCH] fix(style): fix mobile style bugs

---
 index.html                            |  1 +
 src/components.css                    | 29 ++++++++++++++++++++++-----
 src/resource-group-affinity-group.jsx | 22 +++++++++++---------
 src/resource-group.css                | 21 ++++++++++++++-----
 src/section.jsx                       |  4 +++-
 5 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/index.html b/index.html
index bdc4595..b36474b 100644
--- a/index.html
+++ b/index.html
@@ -85,6 +85,7 @@
       siteMenus({
         items: siteItems,
         target: document.getElementById("site-menus"),
+        siteName: "Resources",
       });
 
       resourceCatalog({
diff --git a/src/components.css b/src/components.css
index f2b3bb9..8fded7b 100644
--- a/src/components.css
+++ b/src/components.css
@@ -1,9 +1,28 @@
-.flex-header {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-}
 .highlight {
   background-color: var(--yellow-200);
   padding: 2px 0;
 }
+.header-components {
+  margin-bottom: 2rem;
+}
+.button-group .btn {
+  display: block;
+  margin: 0 0 10px;
+}
+@media (min-width: 768px) {
+  .flex-header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  .header-components {
+    margin-bottom: 0;
+  }
+  .button-group {
+    display: flex;
+  }
+  .button-group .btn {
+    display: flex;
+    margin: 0 10px 0 0;
+  }
+}
diff --git a/src/resource-group-affinity-group.jsx b/src/resource-group-affinity-group.jsx
index 4916272..5e79bf1 100644
--- a/src/resource-group-affinity-group.jsx
+++ b/src/resource-group-affinity-group.jsx
@@ -15,17 +15,19 @@ export default function ResourceGroupAffinityGroup({ baseUri, infoGroupId }) {
         Join the community by participating in an affinity group! Members get
         update about announcements, events, and outages.
       </p>
-      <a href="https://support.access-ci.org/user" class="btn secondary">
-        <Icon name="person-plus-fill" /> Join Affinity Group
-      </a>
-      {slackUri ? (
-        <a href={slackUri} class="btn">
-          <Icon name="slack" /> Connect on Slack
+      <div class="button-group">
+        <a href="https://support.access-ci.org/user" class="btn secondary">
+          <Icon name="person-plus-fill" /> Join Affinity Group
         </a>
-      ) : null}
-      <a href="#questions-and-answers" class="btn">
-        <Icon name="chat-fill" /> Ask and Answer Questions
-      </a>
+        {slackUri ? (
+          <a href={slackUri} class="btn">
+            <Icon name="slack" /> Connect on Slack
+          </a>
+        ) : null}
+        <a href="#questions-and-answers" class="btn">
+          <Icon name="chat-fill" /> Ask and Answer Questions
+        </a>
+      </div>
     </Section>
   );
 }
diff --git a/src/resource-group.css b/src/resource-group.css
index 4756a11..6620e42 100644
--- a/src/resource-group.css
+++ b/src/resource-group.css
@@ -1,12 +1,13 @@
 /* Resource home page */
 .resource-group {
   align-items: flex-start;
+  clear: both;
   display: flex;
-  flex-direction: row;
-  margin-bottom: 40px;
+  flex-direction: column;
+  margin-bottom: 20px;
 }
 .resource-group-image {
-  --image-width: calc((var(--width) - 140px) / 4 + 20px);
+  --image-width: 100%;
   align-items: center;
   background-color: var(--contrast-9);
   border: 1px solid var(--contrast);
@@ -16,7 +17,7 @@
   flex-direction: column;
   font-size: 5rem;
   justify-content: center;
-  margin-right: 20px;
+  margin: 20px 0;
   min-height: calc(var(--image-width) / 3 * 2);
   position: relative;
   width: var(--image-width);
@@ -26,7 +27,6 @@
 .resource-group-image:hover {
   color: var(--contrast-8);
 }
-
 .resource-group-image > img {
   display: block;
   width: 100%;
@@ -51,6 +51,7 @@
 }
 .resource-group-feature-image {
   margin-top: 60px;
+  width: 100%;
 }
 .resource-group-description::after {
   clear: both;
@@ -58,6 +59,16 @@
   display: block;
 }
 
+@media (min-width: 768px) {
+  .resource-group {
+    flex-direction: row;
+    margin-bottom: 40px;
+  }
+  .resource-group-image {
+    --image-width: calc((var(--width) - 140px) / 4 + 20px);
+    margin: 0 20px 0 0;
+  }
+}
 @media (min-width: 900px) {
   .resource-group-feature-image {
     float: right;
diff --git a/src/section.jsx b/src/section.jsx
index d762ce3..5d695d6 100644
--- a/src/section.jsx
+++ b/src/section.jsx
@@ -26,7 +26,9 @@ export default function Section({
           {icon ? <Icon name={icon} /> : null}
           {title}
         </h2>
-        <div>{headerComponents}</div>
+        {headerComponents ? (
+          <div class="header-components">{headerComponents}</div>
+        ) : null}
       </div>
       {children}
     </section>