fix menu overflow

Author: SharglutDev

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

@@ -23,37 +23,53 @@ const Waypoint = ({
   scrollableParentRef,
 }: WaypointProps) => {
   const waypointRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
 
-  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`,
+    }
+  );
+
+  const menuPositionTop = waypointRef.current
+    ? waypointRef.current?.getBoundingClientRect().top + 25
+    : 0;
 
   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
+        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 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;