From a2327acaab7b36953c2f3cd6204ba19bfc9a3d71 Mon Sep 17 00:00:00 2001
From: Vladimir Kobzev <vkobzev@bol.com>
Date: Thu, 15 Feb 2024 13:33:56 +0100
Subject: [PATCH] add word-break: normal to the "moved in direction" table
 header cell Signed-off-by: Vladimir Kobzev <vkobzev@bol.com>

---
 .changeset/poor-beans-cross.md                               | 5 +++++
 .../src/components/RadarTimeline/RadarTimeline.tsx           | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/poor-beans-cross.md

diff --git a/.changeset/poor-beans-cross.md b/.changeset/poor-beans-cross.md
new file mode 100644
index 0000000000..34c473a545
--- /dev/null
+++ b/.changeset/poor-beans-cross.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-tech-radar': patch
+---
+
+Fixed an issue with the "moved in direction" table header cell getting squished and becoming unreadable if a timeline description is too long
diff --git a/plugins/tech-radar/src/components/RadarTimeline/RadarTimeline.tsx b/plugins/tech-radar/src/components/RadarTimeline/RadarTimeline.tsx
index e54c4a499e..2456c26918 100644
--- a/plugins/tech-radar/src/components/RadarTimeline/RadarTimeline.tsx
+++ b/plugins/tech-radar/src/components/RadarTimeline/RadarTimeline.tsx
@@ -47,7 +47,9 @@ const RadarTimeline = (props: Props): JSX.Element => {
         <Table aria-label="simple table">
           <TableHead>
             <TableRow>
-              <TableCell align="left">Moved in direction</TableCell>
+              <TableCell align="left" style={{ wordBreak: 'normal' }}>
+                Moved in direction
+              </TableCell>
               <TableCell align="left">Moved to ring</TableCell>
               <TableCell align="left">Moved on date</TableCell>
               <TableCell align="left">Description</TableCell>