From 8a15360bb484ba6a043a37742b321eb5bc73450a Mon Sep 17 00:00:00 2001
From: Bogdan Nechyporenko <bnechyporenko@bol.com>
Date: Wed, 4 Oct 2023 16:31:16 +0200
Subject: [PATCH] Fix for a Warning Panel. For certain error messages the
 content of it doesn't fit inside the div container.

Signed-off-by: Bogdan Nechyporenko <bnechyporenko@bol.com>
---
 .changeset/perfect-shrimps-attend.md                         | 5 +++++
 .../src/components/WarningPanel/WarningPanel.tsx             | 4 ++++
 2 files changed, 9 insertions(+)
 create mode 100644 .changeset/perfect-shrimps-attend.md

diff --git a/.changeset/perfect-shrimps-attend.md b/.changeset/perfect-shrimps-attend.md
new file mode 100644
index 0000000000..b530d0e2a2
--- /dev/null
+++ b/.changeset/perfect-shrimps-attend.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fixed overflowing messages in `WarningPanel`.
diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx
index 7e8248115f..f4dc298b1e 100644
--- a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx
+++ b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx
@@ -69,6 +69,9 @@ export type WarningPanelClassKey =
 
 const useStyles = makeStyles<BackstageTheme>(
   theme => ({
+    content: {
+      lineBreak: 'anywhere',
+    },
     panel: {
       backgroundColor: ({ severity }: WarningProps) =>
         getWarningBackgroundColor(
@@ -168,6 +171,7 @@ export function WarningPanel(props: WarningProps) {
     >
       <AccordionSummary
         expandIcon={<ExpandMoreIconStyled severity={severity} />}
+        classes={{ content: classes.content }}
         className={classes.summary}
       >
         <ErrorOutlineStyled severity={severity} />