From 0811179ad8dfe9764c6c13beba81c027e3e06ed2 Mon Sep 17 00:00:00 2001
From: Jamie Ruderman <jamieruderman@gmail.com>
Date: Mon, 13 Jul 2026 10:18:24 -0700
Subject: [PATCH 1/2] fix(alert): cap long service-alert message with inner
 scroll, darken text, move timestamp out of the way

---
 src/components/ServiceAlert.tsx | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/ServiceAlert.tsx b/src/components/ServiceAlert.tsx
index 6b7ec97..835bc6d 100644
--- a/src/components/ServiceAlert.tsx
+++ b/src/components/ServiceAlert.tsx
@@ -58,21 +58,21 @@ export function ServiceAlert({ alerts }: ServiceAlertProps) {
             <div className="flex items-start gap-2.5 flex-1 min-w-0">
               <AlertTriangle className="h-5 w-5 text-smart-gold flex-shrink-0 mt-0.5" />
               <div className="flex-1 min-w-0">
-                <div className="flex items-center justify-between gap-2">
-                  <div className="font-semibold text-sm text-smart-gold">
-                    {alert.title ?? t("serviceAlert.sectionTitle")}
-                  </div>
-                  {alert.startsAt && (
-                    <p className="shrink-0 text-xs text-smart-gold/60">
-                      {new Date(alert.startsAt).toLocaleTimeString([], {
-                        hour: "numeric",
-                        minute: "2-digit",
-                      })}
-                    </p>
-                  )}
+                <div className="font-semibold text-sm text-smart-gold">
+                  {alert.title ?? t("serviceAlert.sectionTitle")}
                 </div>
                 {alert.message && (
-                  <p className="text-xs text-smart-gold/80 mt-1">{alert.message}</p>
+                  <p className="text-xs text-foreground/90 mt-1 max-h-40 overflow-y-auto overscroll-contain pr-1">
+                    {alert.message}
+                  </p>
+                )}
+                {alert.startsAt && (
+                  <p className="mt-1.5 text-right text-xs text-smart-gold/60">
+                    {new Date(alert.startsAt).toLocaleTimeString([], {
+                      hour: "numeric",
+                      minute: "2-digit",
+                    })}
+                  </p>
                 )}
               </div>
             </div>

From 55e856719c14d21fecd39af0e1c9bd44c764b9fa Mon Sep 17 00:00:00 2001
From: Jamie Ruderman <jamieruderman@gmail.com>
Date: Mon, 13 Jul 2026 12:16:11 -0700
Subject: [PATCH 2/2] fix(alert): unify alert text to dark gold, tuck timestamp
 under close, shrink scroll, break long URLs

---
 src/components/ServiceAlert.tsx | 42 ++++++++++++++++++---------------
 src/index.css                   |  7 ++++++
 tailwind.config.ts              |  2 ++
 3 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/components/ServiceAlert.tsx b/src/components/ServiceAlert.tsx
index 835bc6d..f1d7c6a 100644
--- a/src/components/ServiceAlert.tsx
+++ b/src/components/ServiceAlert.tsx
@@ -56,34 +56,38 @@ export function ServiceAlert({ alerts }: ServiceAlertProps) {
         >
           <div className="w-full px-5 py-4 md:px-6 flex items-start justify-between gap-3">
             <div className="flex items-start gap-2.5 flex-1 min-w-0">
-              <AlertTriangle className="h-5 w-5 text-smart-gold flex-shrink-0 mt-0.5" />
+              <AlertTriangle className="h-5 w-5 text-smart-gold-dark flex-shrink-0 mt-0.5" />
               <div className="flex-1 min-w-0">
-                <div className="font-semibold text-sm text-smart-gold">
+                <div className="font-semibold text-sm text-smart-gold-dark break-words">
                   {alert.title ?? t("serviceAlert.sectionTitle")}
                 </div>
                 {alert.message && (
-                  <p className="text-xs text-foreground/90 mt-1 max-h-40 overflow-y-auto overscroll-contain pr-1">
+                  <p className="text-xs text-smart-gold-dark mt-1 max-h-32 overflow-y-auto overscroll-contain pr-1 break-words">
                     {alert.message}
                   </p>
                 )}
-                {alert.startsAt && (
-                  <p className="mt-1.5 text-right text-xs text-smart-gold/60">
-                    {new Date(alert.startsAt).toLocaleTimeString([], {
-                      hour: "numeric",
-                      minute: "2-digit",
-                    })}
-                  </p>
-                )}
               </div>
             </div>
-            <button
-              type="button"
-              aria-label={t("serviceAlert.dismiss")}
-              onClick={() => dismissAlert(alert)}
-              className="shrink-0 -mr-2 -mt-2 -mb-2 p-3 rounded-lg text-smart-gold/70 hover:text-smart-gold hover:bg-smart-gold/10 active:bg-smart-gold/20 transition-colors"
-            >
-              <X className="h-5 w-5" />
-            </button>
+            {/* X + timestamp share a right-hand column so the time sits tucked
+                under the close button, right-aligned and clear of the text flow. */}
+            <div className="flex flex-col items-end gap-0.5 shrink-0 -mr-2 -mt-2">
+              <button
+                type="button"
+                aria-label={t("serviceAlert.dismiss")}
+                onClick={() => dismissAlert(alert)}
+                className="p-3 rounded-lg text-smart-gold-dark hover:bg-smart-gold/10 active:bg-smart-gold/20 transition-colors"
+              >
+                <X className="h-5 w-5" />
+              </button>
+              {alert.startsAt && (
+                <p className="text-xs text-smart-gold-dark pr-3 -mt-1">
+                  {new Date(alert.startsAt).toLocaleTimeString([], {
+                    hour: "numeric",
+                    minute: "2-digit",
+                  })}
+                </p>
+              )}
+            </div>
           </div>
         </SectionCard>
       ))}
diff --git a/src/index.css b/src/index.css
index f6e09de..a793eff 100644
--- a/src/index.css
+++ b/src/index.css
@@ -42,6 +42,10 @@ All colors MUST be HSL.
     --smart-green: 143 72% 14%; /* #114533 from logo - kept for logo only */
     --smart-train-green: 157 82% 37%; /* #11ab75 - real train green for UI */
     --smart-gold: 36 69% 54%; /* rgb(216, 146, 63) */
+    /* Deeper gold for text that needs to read clearly on light surfaces (e.g.
+       the service-alert card). Darkened in light mode for contrast; the .dark
+       override below brightens it so it stays legible on dark backgrounds. */
+    --smart-gold-dark: 34 74% 38%; /* rgb(169, 107, 25) */
     /* Removed --smart-light-gold - now using direct HSL values for accent */
     --smart-dark-green: 143 72% 10%; /* Darker green for depth */
     --smart-light-green: 143 72% 20%; /* Lighter green for accents */
@@ -141,6 +145,9 @@ All colors MUST be HSL.
 
     /* SMART Train dark theme colors */
 
+    /* Brighter gold so alert text stays legible on the dark card. */
+    --smart-gold-dark: 40 85% 62%; /* rgb(240, 186, 76) */
+
     /* Brighter my-trip dot so it stays vivid against dark backgrounds. */
     --my-trip: 211 90% 60%;
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 297ba18..2a94b2a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -86,6 +86,8 @@ export default {
           "train-green":
             "hsl(var(--smart-train-green))" /* #11ab75 - main UI */,
           gold: "hsl(var(--smart-gold))" /* rgb(216, 146, 63) */,
+          "gold-dark":
+            "hsl(var(--smart-gold-dark))" /* deeper gold for legible text */,
           "dark-green": "hsl(var(--smart-dark-green))",
           "light-green": "hsl(var(--smart-light-green))",
           neutral: "hsl(228deg 2.65% 45%)" /* default sheet header */,