From fa28ee2d6a6e0fca765f49866c4ea93a316e804a Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 11 Jun 2025 12:21:11 +0200
Subject: [PATCH] Fix invalid dom nesting error and remove redundant braces
 (#10115)

Fixes a console log about invalid dom nesting:

<img width="1256" alt="image"
src="https://github.com/user-attachments/assets/0849103c-6901-4b64-a124-00eaf8cc7dde"
/>

I've changed the offending div to a span. We set `display: flex` on it,
anyway, so it shouldn't make a difference.

I've also removed some redundant functions and braces that we don't
need.
---
 .../FeatureStrategyMenu.tsx                   | 36 +++++++++----------
 .../FeatureStrategyMenuCards.tsx              |  2 +-
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
index b7ba09ba63..b6da44ae7f 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
@@ -217,28 +217,26 @@ export const FeatureStrategyMenu = ({
                 maxWidth='md'
                 PaperProps={{
                     sx: {
-                        borderRadius: (theme) => '12px',
+                        borderRadius: '12px',
                     },
                 }}
             >
-                {
-                    <FeatureStrategyMenuCards
-                        projectId={projectId}
-                        featureId={featureId}
-                        environmentId={environmentId}
-                        onlyReleasePlans={onlyReleasePlans}
-                        onAddReleasePlan={(template) => {
-                            setSelectedTemplate(template);
-                            addReleasePlan(template);
-                        }}
-                        onReviewReleasePlan={(template) => {
-                            setSelectedTemplate(template);
-                            setAddReleasePlanOpen(true);
-                            onClose();
-                        }}
-                        onClose={onClose}
-                    />
-                }
+                <FeatureStrategyMenuCards
+                    projectId={projectId}
+                    featureId={featureId}
+                    environmentId={environmentId}
+                    onlyReleasePlans={onlyReleasePlans}
+                    onAddReleasePlan={(template) => {
+                        setSelectedTemplate(template);
+                        addReleasePlan(template);
+                    }}
+                    onReviewReleasePlan={(template) => {
+                        setSelectedTemplate(template);
+                        setAddReleasePlanOpen(true);
+                        onClose();
+                    }}
+                    onClose={onClose}
+                />
             </Dialog>
             {selectedTemplate && (
                 <ReleasePlanReviewDialog
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
index eb1f57eee0..d85d824b27 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
@@ -91,7 +91,7 @@ const StyledInfoIcon = styled(InfoOutlinedIcon)(({ theme }) => ({
     color: theme.palette.text.secondary,
 }));
 
-const StyledIcon = styled('div')(({ theme }) => ({
+const StyledIcon = styled('span')(({ theme }) => ({
     width: theme.spacing(3),
     '& > svg': {
         fill: theme.palette.primary.main,