From efff47dc1ee00042719c51fc6a5f4366a2092e6f Mon Sep 17 00:00:00 2001
From: Jody Clements <jody@neomorphic.co.uk>
Date: Thu, 21 May 2026 14:02:52 -0400
Subject: [PATCH] fix: wrap long match names in grid view to image width

Long EM body IDs in the grid view overflowed their column because the
antd Button defaults to white-space: nowrap. Allow the publishedName to
wrap by overriding white-space and adding word-break/overflow-wrap on
both the button and its containing paragraph.
---
 src/components/MatchSummary.jsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/MatchSummary.jsx b/src/components/MatchSummary.jsx
index 57c8f654..20bcbd20 100644
--- a/src/components/MatchSummary.jsx
+++ b/src/components/MatchSummary.jsx
@@ -55,11 +55,28 @@ export default function MatchSummary(props) {
             vertical={isVertical}
           />
         </div>
-        <p style={{ margin: "-10px 0 0 0", paddingLeft: "1em", paddingBottom: "2em" }}>
+        <p
+          style={{
+            margin: "-10px 0 0 0",
+            paddingLeft: "1em",
+            paddingRight: "1em",
+            paddingBottom: "2em",
+            overflowWrap: "anywhere",
+            wordBreak: "break-word",
+          }}
+        >
           <Button
             type="link"
             onClick={showModal}
-            style={{ margin: "none", padding: "0.1em"  }}
+            style={{
+              margin: "none",
+              padding: "0.1em",
+              height: "auto",
+              whiteSpace: "normal",
+              wordBreak: "break-word",
+              overflowWrap: "anywhere",
+              textAlign: "left",
+            }}
           >
             {publishedName}
           </Button>