add word-break: normal to the "moved in direction" table header cell

Signed-off-by: Vladimir Kobzev <vkobzev@bol.com>
2024-02-15 13:33:56 +01:00
parent 0dc66a6912
commit a2327acaab
2 changed files with 8 additions and 1 deletions
@@ -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
@@ -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>