fix: Clamp legend height if it exceeds available space

src/components/src/hooks/use-legend-position.ts

@@ -11,12 +11,15 @@
   settings?: MapLegendControlSettings;
   onChangeSettings: (settings: Partial<MapLegendControlSettings>) => void;
   theme: Record<string, any>;
+  mapHeight?: number;
+  mapWidth?: number;
 };
 
 type ReturnType = {
   positionStyles: Record<string, unknown>;
   updatePosition: () => void;
   contentHeight: number;
+  maxContentHeight?: number;
   startResize: () => void;
   resize: (deltaY: number) => void;
 };
@@ -87,14 +90,23 @@
   isSidePanelShown,
   settings,
   onChangeSettings,
-  theme
+  theme,
+  mapHeight,
+  mapWidth
 }: Params): ReturnType {
   const pos = settings?.position ?? DEFAULT_POSITION;
   const contentHeight = settings?.contentHeight ?? -1;
   const positionStyles = useMemo(() => ({[pos.anchorX]: pos.x, [pos.anchorY]: pos.y}), [pos]);
   const startHeightRef = useRef(0);
   const sidePanelWidth = theme.sidePanel?.width || 0;
 
+  // Calculate dynamic max content height based on map root dimensions
+  const maxContentHeight = useMemo(() => {
+    if (!mapHeight) return undefined;
+    // Available height minus margins and header
+    return mapHeight - MARGIN.top - MARGIN.bottom - MAP_CONTROL_HEADER_FULL_HEIGHT;
+  }, [mapHeight]);
+
   const calcPosition = useCalcLegendPosition({
     legendContentRef,
     isSidePanelShown,
@@ -119,8 +131,17 @@
       if (root instanceof HTMLElement && legendContent) {
         const mapRootBounds = root.getBoundingClientRect();
         const legendRect = legendContent.getBoundingClientRect();
+        // Use maxContentHeight if available, otherwise fall back to viewport-based calculation
+        const maxHeight = maxContentHeight
+          ? Math.min(
+              maxContentHeight,
+              mapRootBounds.bottom -
+                (legendRect.top + MAP_CONTROL_HEADER_FULL_HEIGHT + MARGIN.bottom)
+            )
+          : mapRootBounds.bottom -
+            (legendRect.top + MAP_CONTROL_HEADER_FULL_HEIGHT + MARGIN.bottom);
         const nextHeight = Math.min(
-          mapRootBounds.bottom - (legendRect.top + MAP_CONTROL_HEADER_FULL_HEIGHT + MARGIN.bottom),
+          maxHeight,
           Math.max(MIN_CONTENT_HEIGHT, startHeightRef.current + deltaY)
         );
         onChangeSettings({contentHeight: nextHeight});
@@ -130,7 +151,7 @@
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [contentHeight, pos, onChangeSettings]
+    [contentHeight, pos, onChangeSettings, maxContentHeight]
   );
 
   // Shift when side panel is shown/hidden
@@ -151,5 +172,13 @@
     }
   }, [isSidePanelShown, onChangeSettings, sidePanelWidth]);
 
-  return {positionStyles, updatePosition, contentHeight, startResize, resize};
+  // Clamp contentHeight when map resizes to ensure legend stays within available space
+  useEffect(() => {
+    if (!mapWidth || !mapHeight || !legendContentRef.current) return;
+    if (maxContentHeight && contentHeight > 0 && contentHeight > maxContentHeight) {
+      onChangeSettings({contentHeight: maxContentHeight});
+    }
+  }, [mapWidth, mapHeight, contentHeight, onChangeSettings, maxContentHeight]);
+
+  return {positionStyles, updatePosition, contentHeight, maxContentHeight, startResize, resize};
 }

src/components/src/map/map-legend-panel.tsx

@@ -37,7 +37,10 @@ import {restrictToWindowEdges} from '@dnd-kit/modifiers';
 const DRAG_RESIZE_ID = 'map-legend-resize';
 const DRAG_MOVE_ID = 'map-legend-move';
 
-const StyledDraggableLegendContent = styled.div<{contentHeight?: number}>`
+const StyledDraggableLegendContent = styled.div<{
+  contentHeight?: number;
+  maxContentHeight?: number;
+}>`
   position: absolute;
   outline: none;
   transition: border-color 0.2s ease-in-out;
@@ -67,7 +70,8 @@ const StyledDraggableLegendContent = styled.div<{contentHeight?: number}>`
     border-color: ${props => props.theme.activeColor};
   }
   .map-control__panel-content {
-    max-height: calc(100vh - 100px);
+    max-height: ${props =>
+      props.maxContentHeight ? `${props.maxContentHeight}px` : 'calc(100vh - 100px)'};
     ${props => (props.contentHeight ? `height: ${props.contentHeight}px;` : '')};
   }
   border-radius: 4px;
@@ -141,12 +145,13 @@ export type MapLegendPanelFactoryDeps = [
 
 type DraggableLegendContentProps = {
   contentHeight?: number;
+  maxContentHeight?: number;
   positionStyles: Record<string, unknown>;
   children: React.ReactNode;
 };
 
 const DraggableLegendContent = forwardRef((props: DraggableLegendContentProps, ref) => {
-  const {positionStyles, children} = props;
+  const {positionStyles, children, contentHeight, maxContentHeight} = props;
   const draggableMove = useDraggable({id: DRAG_MOVE_ID});
   const draggableResize = useDraggable({id: DRAG_RESIZE_ID});
   const refs = useMergeRefs([draggableMove.setNodeRef, ref]);
@@ -156,7 +161,8 @@ const DraggableLegendContent = forwardRef((props: DraggableLegendContentProps, r
       ref={refs}
       className={classnames('draggable-legend', {'is-dragging': isDragging})}
       style={{...positionStyles, transform: CSS.Translate.toString(draggableMove.transform)}}
-      contentHeight={props.contentHeight}
+      contentHeight={contentHeight}
+      maxContentHeight={maxContentHeight}
       {...draggableMove.attributes}
     >
       {children}
@@ -179,6 +185,7 @@ type DraggableLegendProps = PropsWithChildren<{
   isSidePanelShown: boolean;
   mapControls: MapControls;
   setMapControlSettings: typeof setMapControlSettings;
+  mapState?: MapState;
 }>;
 
 const DraggableLegend = withTheme(
@@ -187,6 +194,7 @@ const DraggableLegend = withTheme(
     children,
     mapControls,
     setMapControlSettings,
+    mapState,
     theme
   }: DraggableLegendProps & {theme: any}) => {
     const settings = mapControls?.mapLegend?.settings;
@@ -196,13 +204,16 @@ const DraggableLegend = withTheme(
       newSettings => setMapControlSettings('mapLegend', newSettings),
       [setMapControlSettings]
     );
-    const {positionStyles, updatePosition, startResize, resize, contentHeight} = useLegendPosition({
-      legendContentRef,
-      isSidePanelShown,
-      theme,
-      settings,
-      onChangeSettings
-    });
+    const {positionStyles, updatePosition, startResize, resize, contentHeight, maxContentHeight} =
+      useLegendPosition({
+        legendContentRef,
+        isSidePanelShown,
+        theme,
+        settings,
+        onChangeSettings,
+        mapHeight: mapState?.height,
+        mapWidth: mapState?.width
+      });
 
     const handleDragStart = useCallback(
       event => {
@@ -239,6 +250,7 @@ const DraggableLegend = withTheme(
           ref={legendContentRef}
           positionStyles={positionStyles}
           contentHeight={contentHeight}
+          maxContentHeight={maxContentHeight}
         >
           {children}
         </DraggableLegendContent>
@@ -413,6 +425,7 @@ const MapLegendPanelComponent = ({
               isSidePanelShown={isSidePanelShown}
               mapControls={mapControls}
               setMapControlSettings={setMapControlSettings}
+              mapState={mapState}
             >
               {legendPanel}
             </DraggableLegend>,

test/browser/components/hooks/use-legend-position.spec.js

@@ -56,4 +56,81 @@ describe('useLegendPosition', () => {
     );
     expect(positionStyles).toEqual({left: 100, top: 200});
   });
+
+  test('should calculate maxContentHeight from mapWidth and mapHeight', () => {
+    const {
+      result: {
+        current: {maxContentHeight}
+      }
+    } = renderHook(() =>
+      useLegendPosition({
+        legendContentRef: {current: document.querySelector('#map-legend-content')},
+        isSidePanelShown: false,
+        settings: {},
+        onChangeSettings: jest.fn(),
+        theme: THEME,
+        mapHeight: 600,
+        mapWidth: 800
+      })
+    );
+    // maxContentHeight = height - MARGIN.top - MARGIN.bottom - MAP_CONTROL_HEADER_FULL_HEIGHT
+    // = 600 - 10 - 30 - 34 = 526
+    expect(maxContentHeight).toBe(526);
+  });
+
+  test('should return undefined maxContentHeight when mapWidth and mapHeight not provided', () => {
+    const {
+      result: {
+        current: {maxContentHeight}
+      }
+    } = renderHook(() =>
+      useLegendPosition({
+        legendContentRef: {current: document.querySelector('#map-legend-content')},
+        isSidePanelShown: false,
+        settings: {},
+        onChangeSettings: jest.fn(),
+        theme: THEME
+      })
+    );
+    expect(maxContentHeight).toBeUndefined();
+  });
+
+  test('should clamp contentHeight when it exceeds maxContentHeight', () => {
+    const onChangeSettings = jest.fn();
+    const legendContent = document.querySelector('#map-legend-content');
+    legendContent.getBoundingClientRect = jest.fn(() => ({
+      width: 200,
+      height: 300,
+      top: 0,
+      left: 0,
+      bottom: 300,
+      right: 200
+    }));
+
+    renderHook(() =>
+      useLegendPosition({
+        legendContentRef: {current: legendContent},
+        isSidePanelShown: false,
+        settings: {
+          position: {x: 100, y: 100, anchorX: 'left', anchorY: 'top'},
+          contentHeight: 1000 // Exceeds maxContentHeight
+        },
+        onChangeSettings,
+        theme: THEME,
+        mapHeight: 600,
+        mapWidth: 800
+      })
+    );
+
+    // Should clamp contentHeight to maxContentHeight (526)
+    expect(onChangeSettings).toHaveBeenCalled();
+    const callsWithContentHeight = onChangeSettings.mock.calls.filter(
+      call => call[0].contentHeight !== undefined
+    );
+    if (callsWithContentHeight.length > 0) {
+      expect(
+        callsWithContentHeight[callsWithContentHeight.length - 1][0].contentHeight
+      ).toBeLessThanOrEqual(526);
+    }
+  });
 });