diff --git a/frontend/react/src/constants/constants.ts b/frontend/react/src/constants/constants.ts
index 1f485702..190f5abb 100644
--- a/frontend/react/src/constants/constants.ts
+++ b/frontend/react/src/constants/constants.ts
@@ -504,7 +504,7 @@ export namespace ContextActions {
   export const PATH = new ContextAction(
     "path",
     "Create route",
-    "Click on the map to add a destination add the end of the path. This allows to create a more complex route.",
+    "Click on the map to add a destination at the end of the path. This allows to create a more complex route.",
     faRoute,
     ContextActionTarget.POINT,
     (units: Unit[], _, targetPosition) => {
diff --git a/frontend/react/src/ui/panels/maptoolbar.tsx b/frontend/react/src/ui/panels/maptoolbar.tsx
index 40e288c4..981027e3 100644
--- a/frontend/react/src/ui/panels/maptoolbar.tsx
+++ b/frontend/react/src/ui/panels/maptoolbar.tsx
@@ -78,8 +78,8 @@ export function MapToolBar(props: {}) {
         {options.ctrlKey && (
           <kbd
             className={`
-              my-auto ml-auto text-nowrap rounded-lg border border-gray-200
-              bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-800
+              my-auto text-nowrap rounded-lg border border-gray-200 bg-gray-100
+              px-2 py-1 text-xs font-semibold text-gray-800
               dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100
             `}
           >
@@ -89,8 +89,8 @@ export function MapToolBar(props: {}) {
         {options.altKey && (
           <kbd
             className={`
-              my-auto ml-auto text-nowrap rounded-lg border border-gray-200
-              bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-800
+              my-auto text-nowrap rounded-lg border border-gray-200 bg-gray-100
+              px-2 py-1 text-xs font-semibold text-gray-800
               dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100
             `}
           >
@@ -100,8 +100,8 @@ export function MapToolBar(props: {}) {
         {options.shiftKey && (
           <kbd
             className={`
-              my-auto ml-auto text-nowrap rounded-lg border border-gray-200
-              bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-800
+              my-auto text-nowrap rounded-lg border border-gray-200 bg-gray-100
+              px-2 py-1 text-xs font-semibold text-gray-800
               dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100
             `}
           >
@@ -112,8 +112,8 @@ export function MapToolBar(props: {}) {
         {options.code && (
           <kbd
             className={`
-              my-auto ml-auto text-nowrap rounded-lg border border-gray-200
-              bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-800
+              my-auto text-nowrap rounded-lg border border-gray-200 bg-gray-100
+              px-2 py-1 text-xs font-semibold text-gray-800
               dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100
             `}
           >
@@ -153,10 +153,7 @@ export function MapToolBar(props: {}) {
                   checked={selectionEnabled}
                   icon={faObjectGroup}
                   tooltip={() => (
-                    <div
-                      className="overflow-hidden"
-                      style={{ animationName: "fadeIn", animationDuration: "1s", animationFillMode: "forwards", height: "25px" }}
-                    >
+                    <div>
                       <div className="flex content-center gap-2">
                         {shortcutCombination(shortcuts["toggleSelectionEnabled"]?.getOptions())}
                         <div className="my-auto">Box selection</div>
@@ -229,14 +226,19 @@ export function MapToolBar(props: {}) {
                     icon={contextActionIt.getIcon()}
                     tooltip={() => (
                       <div
-                      className="overflow-hidden"
-                      style={{ animationName: "tooltipFadeInHeight", animationDuration: "1s", animationFillMode: "forwards", height: "25px" }}
-                    >
-                      <div className="flex content-center gap-2">
-                        {shortcutCombination(contextActionIt.getOptions())}
-                        <div className="my-auto">{contextActionIt.getLabel()}</div>
-                      </div>
-                      <div className={"max-w-[200px] text-wrap"} style={{ animationName: "tooltipFadeInWidth", animationDuration: "1s", animationFillMode: "forwards", width: "1px" }}>{contextActionIt.getDescription()}</div>
+                        className="overflow-hidden"
+                        style={{ animationName: "tooltipFadeInHeight", animationDuration: "1s", animationFillMode: "forwards", height: "26px" }}
+                      >
+                        <div className="mb-4 flex h-6 content-center gap-2">
+                          {shortcutCombination(contextActionIt.getOptions())}
+                          <div className="my-auto">{contextActionIt.getLabel()}</div>
+                        </div>
+                        <div
+                          className={"max-w-[200px] text-wrap"}
+                          style={{ animationName: "tooltipFadeInWidth", animationDuration: "1s", animationFillMode: "forwards", width: "1px" }}
+                        >
+                          {contextActionIt.getDescription()}
+                        </div>
                       </div>
                     )}
                     tooltipPosition="side"
diff --git a/frontend/react/src/ui/ui.css b/frontend/react/src/ui/ui.css
index 95147ad0..ca1aa76c 100644
--- a/frontend/react/src/ui/ui.css
+++ b/frontend/react/src/ui/ui.css
@@ -107,7 +107,7 @@ input[type="range"]:focus::-moz-range-thumb {
 
 @keyframes tooltipFadeInHeight {
   99% {
-    height: 25px;
+    height: 26px;
   }
   100% {
     height: fit-content;