diff --git a/designer/client/src/components/toolbarComponents/toolbarButtons/ToolbarButtonStyled.tsx b/designer/client/src/components/toolbarComponents/toolbarButtons/ToolbarButtonStyled.tsx
index 4b4712e96fa..3814a66a83b 100644
--- a/designer/client/src/components/toolbarComponents/toolbarButtons/ToolbarButtonStyled.tsx
+++ b/designer/client/src/components/toolbarComponents/toolbarButtons/ToolbarButtonStyled.tsx
@@ -2,11 +2,14 @@ import { styled } from "@mui/material";
 import { PANEL_BUTTON_SIZE } from "../../../stylesheets/variables";
 
 export const Icon = styled("div")({
-    flex: 1,
-    lineHeight: 0,
-    display: "flex",
-    flexDirection: "column",
-    width: PANEL_BUTTON_SIZE / 2,
+    // TODO: flatten nested usages 
+    "&, &>*": {
+        flex: 1,
+        lineHeight: 0,
+        display: "flex",
+        flexDirection: "column",
+        width: PANEL_BUTTON_SIZE / 2,
+    },
 });
 
 export const ToolbarButtonWrapper = styled("div")(() => ({