From 895cb1aab331c8e402293ca8a1c82b9899d9d05b Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 2 Jun 2025 08:53:51 +0200
Subject: [PATCH] fix: regexes in flag naming patterns will now break when
 necessary (#10067)

This prevents the regex pattterns from causing overflows in chrome and
pushing the create button off screen (firefox already handled it
:shrug:).

We don't provide the *best* experience when you have super long flag
patterns, but we can potentially look into that later. For now, this
fixes the immediate issue.

Before the fix:
Chrome:
<img width="1519" alt="image"
src="https://github.com/user-attachments/assets/5bcb717c-67f0-4c7b-9ac1-29e9bdaf568e"
/>

Firefox:
<img width="1385" alt="image"
src="https://github.com/user-attachments/assets/19f38233-f6cd-45f0-9766-76b954f2eed4"
/>


After the fix:
Chrome:
<img width="1383" alt="image"
src="https://github.com/user-attachments/assets/3d9bb6dd-b31c-45aa-9c4e-baa96ba1c16b"
/>

Firefox is the same
---
 .../common/DialogFormTemplate/NamingPatternInfo.tsx      | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/common/DialogFormTemplate/NamingPatternInfo.tsx b/frontend/src/component/common/DialogFormTemplate/NamingPatternInfo.tsx
index c7a80313ae..79a631a140 100644
--- a/frontend/src/component/common/DialogFormTemplate/NamingPatternInfo.tsx
+++ b/frontend/src/component/common/DialogFormTemplate/NamingPatternInfo.tsx
@@ -34,6 +34,10 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
     margin: 0,
 }));
 
+const BreakableCode = styled('code')({
+    overflowWrap: 'anywhere',
+});
+
 type Props = {
     naming: CreateFeatureNamingPatternSchema;
 };
@@ -48,14 +52,15 @@ export const NamingPatternInfo: React.FC<Props> = ({ naming }) => {
                     aria-controls={controlId}
                     expandIcon={<ExpandMoreIcon />}
                 >
-                    Name must match:&nbsp;<code>^{naming.pattern}$</code>
+                    Name must match:&nbsp;
+                    <BreakableCode>^{naming.pattern}$</BreakableCode>
                 </AccordionSummary>
                 <AccordionDetails>
                     <p>The name must match this pattern:</p>
                     <dl id='naming-pattern-info'>
                         <dt>Pattern</dt>
                         <dd>
-                            <code>^{naming.pattern}$</code>
+                            <BreakableCode>^{naming.pattern}$</BreakableCode>
                         </dd>
                         <ConditionallyRender
                             condition={Boolean(naming?.example)}