Fix offset on tooltip when 4 menu buttons are available

Author: r59q

src/components/layout/SideBarMenuView.svelte

@@ -63,6 +63,7 @@
     <div class="relative">
       {#each get(Menus.getMenuStore()) as menu, id}
         <MenuButton
+          tooltipOffset={menu.tooltipOffset}
           onClickFunction={() => {
             navigate(menu.navigationPath);
           }}

src/components/menus/MenuButton.svelte

@@ -12,13 +12,15 @@
 
 <script lang="ts">
   import { t } from '../../i18n';
+    import type { MenuProperties } from '../../lib/navigation/Menus';
   import Information from '../ui/information/Information.svelte';
 
   export let title: string;
   export let helpTitle: string;
   export let helpDescription: string;
   export let onClickFunction: () => void;
   export let isExpanded: boolean;
+  export let tooltipOffset: MenuProperties['tooltipOffset'] = {x: -100, y: 30};
 </script>
 
 <div>
@@ -43,7 +45,7 @@
       <div class="absolute top-3px right-12">
         <Information
           bodyText={$t(helpDescription)}
-          boxOffset={{ x: -200, y: 30 }}
+          boxOffset={tooltipOffset}
           titleText={$t(helpTitle)}
           width={280} />
       </div>

src/lib/navigation/Menus.ts

@@ -21,6 +21,7 @@ export interface MenuProperties {
   collapsedButtonContent: typeof SvelteComponent<any> | undefined;
   expandedButtonContent: typeof SvelteComponent<any>;
   additionalExpandPaths?: PathType[];
+  tooltipOffset?: {x: number, y: number};
 };
 
 /**
@@ -63,6 +64,7 @@ class Menus {
             collapsedButtonContent: undefined,
             expandedButtonContent: ModelMenu,
             navigationPath: Paths.MODEL,
+            tooltipOffset: {x: -100, y: -250}
           },
         ]
       : [