[2679] Align the input element like the corresponding label

Bug: #2679
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>

CHANGELOG.adoc

@@ -80,6 +80,7 @@ info: {
 - https://github.com/eclipse-sirius/sirius-web/issues/2720[#2720] [releng] Improve our build process to be faster in development mode
 - https://github.com/eclipse-sirius/sirius-web/issues/2780[#2780] [releng] Upgrade github/aws actions versions in workflows
 - https://github.com/eclipse-sirius/sirius-web/issues/2644[#2644] [diagram] Highlight nodes on hover in React Flow diagrams
+- https://github.com/eclipse-sirius/sirius-web/issues/2679[#2679] [diagram] When editing a label, place input element closer to the label's location (centered).
 
 
 == v2023.12.0

packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/Label.tsx

@@ -57,20 +57,22 @@ export const Label = memo(({ diagramElementId, label, faded, transform }: LabelP
     }
   };
 
-  if (label.id === currentlyEditedLabelId) {
-    return (
+  const content: JSX.Element =
+    label.id === currentlyEditedLabelId ? (
       <DiagramDirectEditInput editingKey={editingKey} onClose={handleClose} labelId={label.id} transform={transform} />
+    ) : (
+      <>
+        <IconOverlay iconURL={label.iconURL} alt={label.text} />
+        {label.text}
+      </>
     );
-  }
-
   return (
     <div
       data-id={label.id}
       data-testid={`Label - ${label.text}`}
       style={labelStyle(theme, label.style, faded, transform, !!label.iconURL)}
       className="nopan">
-      <IconOverlay iconURL={label.iconURL} alt={label.text} />
-      {label.text}
+      {content}
     </div>
   );
 });