fix menu overflow

Author: SharglutDev

storybook/.storybook/main.ts

@@ -24,13 +24,13 @@ const config: StorybookConfig = {
   },
   staticDirs: ['../public'],
   logLevel: 'debug',
-  // async viteFinal(config) {
-  //   return mergeConfig(config, {
-  //     resolve: {
-  //       preserveSymlinks: true,
-  //     },
-  //   });
-  // },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      resolve: {
+        preserveSymlinks: true,
+      },
+    });
+  },
 };
 export default config;
 

ui-manchette-with-spacetimechart/src/stories/base.stories.tsx

@@ -1,7 +1,6 @@
 import React, { useRef } from 'react';
 
-import Manchette from '@osrd-project/ui-manchette';
-import type { ProjectPathTrainResult, Waypoint } from '@osrd-project/ui-manchette/dist/types';
+import Manchette, { type ProjectPathTrainResult, type Waypoint } from '@osrd-project/ui-manchette';
 import { PathLayer, SpaceTimeChart } from '@osrd-project/ui-spacetimechart';
 import type { Meta } from '@storybook/react';
 

ui-manchette-with-spacetimechart/src/styles/menu.css

@@ -1,10 +1,6 @@
 .menu {
-  position: absolute;
-  z-index: 12;
   @apply bg-grey-5;
   width: 305px;
-  top: 30px;
-  left: 0;
   border: 0.0625rem solid #b6b2af;
   border-radius: 0.5rem;
   box-shadow:

ui-manchette/src/components/Waypoint.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 
 import cx from 'classnames';
 
@@ -8,6 +8,8 @@ import '@osrd-project/ui-core/dist/theme.css';
 import { positionMmToKm } from '../utils';
 
 const MANCHETTE_ACTIONS_HEIGHT = '-40px';
+// Waypoint height minus its position offset
+const MENU_OFFSET = 2;
 
 type WaypointProps = {
   waypoint: InteractiveWaypoint;
@@ -23,37 +25,62 @@ const Waypoint = ({
   scrollableParentRef,
 }: WaypointProps) => {
   const waypointRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [menuPositionTop, setMenuPositionTop] = useState(0);
 
-  const isWaypointInView = useElementInView(waypointRef, scrollableParentRef, {
-    threshold: 1,
-    rootMargin: `0px 0px ${MANCHETTE_ACTIONS_HEIGHT} 0px`,
+  const isWaypointInView = useElementInView(
+    isActive ? waypointRef : undefined,
+    scrollableParentRef,
+    {
+      threshold: 1,
+      rootMargin: `0px 0px ${MANCHETTE_ACTIONS_HEIGHT} 0px`,
+    }
+  );
+
+  // We have to omit the dependency array here otherwise the menu won't move on scroll
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useLayoutEffect(() => {
+    // Having the waypoint div in position relative has the side effect of making the menu
+    // not overflowing the waypoint list. So we need to position it with this logic.
+    if (waypointRef.current) {
+      const { bottom } = waypointRef.current?.getBoundingClientRect();
+      setMenuPositionTop(bottom - MENU_OFFSET);
+    }
   });
 
   if (!display) return null;
 
   return (
-    <div
-      className={cx('flex waypoint items-baseline', {
-        'menu-active': isActive,
-      })}
-      id={id}
-      onClick={() => {
-        if (onClick) onClick(id);
-      }}
-    >
-      <div ref={waypointRef} className="waypoint-position justify-self-start text-end">
-        {positionMmToKm(position)}
-      </div>
+    <>
+      <div
+        ref={waypointRef}
+        className={cx('flex waypoint items-baseline', {
+          'menu-active': isActive,
+        })}
+        id={id}
+        onClick={() => {
+          if (onClick) onClick(id);
+        }}
+      >
+        <div className="waypoint-position justify-self-start text-end">
+          {positionMmToKm(position)}
+        </div>
 
-      <div className="waypoint-name mx-2 justify-self-start">{name}</div>
-      <div className="waypoint-separator"></div>
-      <div className="waypoint-ch font-mono justify-self-end">{secondaryCode}</div>
-      <div className="waypoint-separator"></div>
+        <div className="waypoint-name mx-2 justify-self-start">{name}</div>
+        <div className="waypoint-separator"></div>
+        <div className="waypoint-ch font-mono justify-self-end">{secondaryCode}</div>
+        <div className="waypoint-separator"></div>
 
-      <div className="waypoint-type"></div>
-      <div className="waypoint-separator"></div>
-      {waypointMenu && isActive && isWaypointInView && waypointMenu}
-    </div>
+        <div className="waypoint-type"></div>
+        <div className="waypoint-separator"></div>
+        {waypointMenu && isActive && isWaypointInView && (
+          <div className="menu-wrapper" ref={menuRef} style={{ top: menuPositionTop }}>
+            {waypointMenu}
+          </div>
+        )}
+      </div>
+      <div className="last-separator"></div>
+    </>
   );
 };
 

ui-manchette/src/components/WaypointList.tsx

@@ -13,7 +13,7 @@ const WaypointList = ({ waypoints, waypointMenuData }: WaypointListProps) => (
     {waypoints.map((waypoint) => (
       <div
         key={waypoint.id}
-        className="waypoint-wrapper flex flex-col justify-start"
+        className="waypoint-wrapper flex justify-start"
         style={waypoint.styles}
       >
         <Waypoint

ui-manchette/src/hooks/useElementInView.ts

@@ -39,7 +39,7 @@ const useElementInView = <T extends HTMLElement>(
       }
     );
 
-    observer.observe(currentRef.parentElement!);
+    observer.observe(currentRef);
 
     return () => observer.disconnect();
   }, [ref, containerRef, options]);

ui-manchette/src/styles/waypoint-list.css

@@ -1,7 +1,7 @@
 .waypoint-list {
   width: 349px;
   border-bottom-left-radius: 0.25rem;
-  padding-inline: 0.5rem 1.625rem;
+  padding-left: 0.5rem;
 
   @apply bg-white-100;
 

ui-manchette/src/styles/waypoint.css

@@ -4,7 +4,6 @@
   line-height: 1.5rem;
   padding-block: 3px 5px;
   width: 315px;
-  position: relative;
   &-separator {
     position: relative;
     opacity: 0.6;
@@ -81,12 +80,22 @@
     }
   }
 
+  .menu-wrapper {
+    position: absolute;
+    z-index: 12;
+  }
+}
+
+.last-separator {
+  width: 26px;
+  height: 2rem;
+
+  position: relative;
   &::after {
     content: '';
     position: absolute;
     display: inline-block;
     bottom: 16px;
-    right: -1.625rem;
     width: 1.625rem;
     height: 0.5px;
     opacity: 0.6;