From 5c5f2b405072eadbc5f0400cca89055745ea6baa Mon Sep 17 00:00:00 2001
From: Ricky Stretch <rick@stretchy.ca>
Date: Sat, 28 Mar 2026 15:19:27 -0400
Subject: [PATCH] css fix for about tab

---
 frontend/src/components/AboutModal.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/AboutModal.jsx b/frontend/src/components/AboutModal.jsx
index 6f3e297..379ea06 100644
--- a/frontend/src/components/AboutModal.jsx
+++ b/frontend/src/components/AboutModal.jsx
@@ -3,12 +3,15 @@ import { api } from '../utils/api.js';
 
 const CLAUDE_URL = 'https://claude.ai';
 
-// Render "Built With" value — separator trails its token so it never starts a new line
+// Render "Built With" value — each token+separator is a nowrap unit; the flex
+// container wraps between tokens. Using display:flex (not inline) ensures Firefox
+// and Safari honour the wrap at the flex-item level rather than computing the
+// min-content width as the full un-broken string (which suppresses wrapping).
 function BuiltWithValue({ value }) {
   if (!value) return null;
   const parts = value.split('·').map(s => s.trim());
   return (
-    <span style={{ display: 'inline' }}>
+    <span style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'baseline', width: '100%' }}>
       {parts.map((part, i) => (
         <span key={part} style={{ whiteSpace: 'nowrap' }}>
           {part === 'Claude.ai'