From f24f8a896c444c7b13b59c4712ef02a025e2ffc9 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Mon, 29 Jul 2024 10:54:43 +0200 Subject: [PATCH] fix: break long project/flag names in the event log to prevent overflow (#7684) This change sets the `overflow-wrap` property for the definition list values in the event log. This is to prevent long project/flag names from making the left-hand side of the card suuuper wide, causing overflow of the whole container. Before: ![image](https://github.com/user-attachments/assets/4f813d71-731d-4bb8-86b0-89ff235b2244) After: ![image](https://github.com/user-attachments/assets/6739d3f0-552b-47c7-8dca-4235a737367e) --- frontend/src/component/events/EventCard/EventCard.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frontend/src/component/events/EventCard/EventCard.tsx b/frontend/src/component/events/EventCard/EventCard.tsx index 0a59ad530b..9c25c9a799 100644 --- a/frontend/src/component/events/EventCard/EventCard.tsx +++ b/frontend/src/component/events/EventCard/EventCard.tsx @@ -39,6 +39,10 @@ const StyledContainerListItem = styled('li')(({ theme }) => ({ }, }, + '& dd': { + overflowWrap: 'anywhere', + }, + a: { color: theme.palette.links, },