Fix overflowing of the text in the button in the composer

inmanta · Apr 23, 2024 · 52f8848 · 52f8848
1 parent 5d4830c
commit 52f8848
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/changelogs/unreleased/5689-add-instance-button-bug.yml b/changelogs/unreleased/5689-add-instance-button-bug.yml
@@ -0,0 +1,6 @@
+description: "Resolve a bug of invalid presentation of the add instance button in the instance composer when using Firefox"
+issue-nr: 5689
+change-type: patch
+destination-branches: [master, iso7]
+sections:
+  bugfix: "{{description}}"
diff --git a/src/UI/Components/Diagram/components/Toolbar.tsx b/src/UI/Components/Diagram/components/Toolbar.tsx
@@ -54,12 +54,19 @@ const Toolbar = ({
                 aria-label="new-entity-button"
                 isDisabled={!editable}
               >
-                <img
-                  src={entityIcon}
-                  alt="Create new entity icon"
-                  aria-label="new-entity-icon"
-                />{" "}
-                {words("inventory.addInstance.button")}
+                <Flex alignItems={{ default: "alignItemsCenter" }}>
+                  <FlexItem
+                    spacer={{ default: "spacerXs" }}
+                    style={{ width: "16px", height: "20px" }}
+                  >
+                    <img
+                      src={entityIcon}
+                      alt="Create new entity icon"
+                      aria-label="new-entity-icon"
+                    />
+                  </FlexItem>
+                  <FlexItem>{words("inventory.addInstance.button")}</FlexItem>
+                </Flex>
               </IconButton>
             </Tooltip>
           </FlexItem>