From f76af4bab9811876cb23fb41b65dc9cd834d531d Mon Sep 17 00:00:00 2001
From: Ashley Wolf <ashleywolf@github.com>
Date: Thu, 30 Apr 2026 21:34:24 -0700
Subject: [PATCH 1/2] Fix: move calendar links below event text, out of bubble

---
 components/event-detail/EventDetail.jsx | 44 +++++++++++++------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/components/event-detail/EventDetail.jsx b/components/event-detail/EventDetail.jsx
index 19002ad9..8d6f224e 100644
--- a/components/event-detail/EventDetail.jsx
+++ b/components/event-detail/EventDetail.jsx
@@ -138,6 +138,29 @@ const EventDetail = ({ event, reverseColumns, isFullPage }) => {
               }}
             />
           ) : null}
+          {isFullPage && (getGoogleCalendarUrl(event) || getIcsContent(event)) ? (
+            <div className="event-detail__calendar-links">
+              {getGoogleCalendarUrl(event) && (
+                <a
+                  className="event-detail__calendar-link"
+                  href={getGoogleCalendarUrl(event)}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Add to Google Calendar
+                </a>
+              )}
+              {getIcsContent(event) && (
+                <button
+                  className="event-detail__calendar-link"
+                  onClick={() => downloadIcs(event)}
+                  type="button"
+                >
+                  Download .ics
+                </button>
+              )}
+            </div>
+          ) : null}
         </div>
         {!isFullPage ? (
           <PlayLink href={event.linkUrl}>
@@ -155,27 +178,6 @@ const EventDetail = ({ event, reverseColumns, isFullPage }) => {
           >
             {getLiteral(`event-button:${event.type}`)} <IconArrowRight />
           </a>
-          <div className="event-detail__calendar-links">
-            {getGoogleCalendarUrl(event) && (
-              <a
-                className="event-detail__calendar-link"
-                href={getGoogleCalendarUrl(event)}
-                target="_blank"
-                rel="noreferrer"
-              >
-                Add to Google Calendar
-              </a>
-            )}
-            {getIcsContent(event) && (
-              <button
-                className="event-detail__calendar-link"
-                onClick={() => downloadIcs(event)}
-                type="button"
-              >
-                Download .ics
-              </button>
-            )}
-          </div>
         </div>
       ) : null}
     </article>

From f7fbe72cdfdc2bfc84db207e1d978ce96324071f Mon Sep 17 00:00:00 2001
From: Ashley Wolf <ashleywolf@github.com>
Date: Thu, 30 Apr 2026 21:34:26 -0700
Subject: [PATCH 2/2] Fix: calendar links styled as pill buttons matching theme

---
 components/event-detail/event-detail.scss | 24 +++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/components/event-detail/event-detail.scss b/components/event-detail/event-detail.scss
index 6527baf6..98a6bde7 100644
--- a/components/event-detail/event-detail.scss
+++ b/components/event-detail/event-detail.scss
@@ -293,21 +293,25 @@
 }
 .event-detail__calendar-links {
   display: flex;
-  gap: 16px;
-  margin-top: 12px;
+  gap: 12px;
+  margin-top: 24px;
+  flex-wrap: wrap;
 }
 
 .event-detail__calendar-link {
-  font-size: 14px;
-  color: var(--color-fg-muted, #656d76);
-  text-decoration: underline;
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
+  font-size: 0.875rem;
   font-family: inherit;
+  color: rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 100px;
+  padding: 8px 16px;
+  cursor: pointer;
+  text-decoration: none;
+  transition: background 0.2s ease, color 0.2s ease;
 
   &:hover {
-    color: var(--color-fg-default, #1f2328);
+    background: rgba(255, 255, 255, 0.95);
+    color: #6e40c9;
   }
 }