From 63622618b40bf10156d6fda6a6d798076adef4d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Thu, 7 Aug 2025 11:32:06 +0100
Subject: [PATCH] fix: environment name cell (#10474)

https://linear.app/unleash/issue/2-3758/fix-environment-name-cell-after-the-latest-changes-to-textcell

Noticed the environment name cell acted differently after
[adjusting](https://github.com/Unleash/unleash/pull/10466/files#diff-485a5be6a3a5d639b56c3b29488125db051ce6b8a0e3561368d657d62dee4975R28)
the span inside TextCell to be `display: inline-flex`.

By wrapping the contents of our TextCell here into a single div we
explicitly declare this to be a single row of elements.
---
 .../EnvironmentNameCell.tsx                   | 65 ++++++++++---------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/frontend/src/component/environments/EnvironmentTable/EnvironmentNameCell/EnvironmentNameCell.tsx b/frontend/src/component/environments/EnvironmentTable/EnvironmentNameCell/EnvironmentNameCell.tsx
index f93712e0f4..76825f00f7 100644
--- a/frontend/src/component/environments/EnvironmentTable/EnvironmentNameCell/EnvironmentNameCell.tsx
+++ b/frontend/src/component/environments/EnvironmentTable/EnvironmentNameCell/EnvironmentNameCell.tsx
@@ -37,35 +37,42 @@ export const EnvironmentNameCell = ({
                 },
             })}
         >
-            <Highlighter search={searchQuery}>{environment.name}</Highlighter>
-            <ConditionallyRender
-                condition={environment.protected}
-                show={<StyledBadge color='success'>Predefined</StyledBadge>}
-            />
-            <ConditionallyRender
-                condition={!environment.enabled}
-                show={
-                    <HtmlTooltip
-                        maxWidth='270px'
-                        title={
-                            <>
-                                <StyledTooltipTitle>
-                                    Deprecated environment
-                                </StyledTooltipTitle>
-                                <StyledTooltipDescription>
-                                    This environment is not auto-enabled for new
-                                    projects. The project owner will need to
-                                    manually enable it in the project.
-                                </StyledTooltipDescription>
-                            </>
-                        }
-                        describeChild
-                        arrow
-                    >
-                        <StyledBadge color='neutral'>Deprecated</StyledBadge>
-                    </HtmlTooltip>
-                }
-            />
+            <div>
+                <Highlighter search={searchQuery}>
+                    {environment.name}
+                </Highlighter>
+                <ConditionallyRender
+                    condition={environment.protected}
+                    show={<StyledBadge color='success'>Predefined</StyledBadge>}
+                />
+                <ConditionallyRender
+                    condition={!environment.enabled}
+                    show={
+                        <HtmlTooltip
+                            maxWidth='270px'
+                            title={
+                                <>
+                                    <StyledTooltipTitle>
+                                        Deprecated environment
+                                    </StyledTooltipTitle>
+                                    <StyledTooltipDescription>
+                                        This environment is not auto-enabled for
+                                        new projects. The project owner will
+                                        need to manually enable it in the
+                                        project.
+                                    </StyledTooltipDescription>
+                                </>
+                            }
+                            describeChild
+                            arrow
+                        >
+                            <StyledBadge color='neutral'>
+                                Deprecated
+                            </StyledBadge>
+                        </HtmlTooltip>
+                    }
+                />
+            </div>
         </TextCell>
     );
 };