[Dashboard] Fix amp list in dashboard form

MTES-MCT · Jan 23, 2025 · 3c99076 · 3c99076
1 parent c0e6824
commit 3c99076
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 22 deletions.
diff --git a/frontend/src/features/Dashboard/components/DashboardForm/Amps/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/Amps/index.tsx
@@ -1,7 +1,6 @@
 import { useGetAMPsQuery } from '@api/ampsAPI'
 import { getOpenedPanel } from '@features/Dashboard/slice'
 import { Dashboard } from '@features/Dashboard/types'
-import { LayerSelector } from '@features/layersSelector/utils/LayerSelector.style'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { pluralize } from '@mtes-mct/monitor-ui'
 import { groupBy } from 'lodash'
@@ -12,7 +11,7 @@ import { Accordion } from '../Accordion'
 import { SelectedAccordion } from '../SelectedAccordion'
 import { ListLayerGroup } from './ListLayerGroup'
 import { AmpPanel } from './Panel'
-import { SelectedLayerList } from '../style'
+import { SelectedLayerList, StyledLayerList } from '../style'
 
 import type { AMP, AMPFromAPI } from 'domain/entities/AMPs'
 
@@ -101,11 +100,6 @@ export const Amps = forwardRef<HTMLDivElement, AmpsProps>(
   }
 )
 
-const StyledLayerList = styled(LayerSelector.LayerList)`
-  overflow: hidden;
-  height: auto;
-`
-
 const StyledPanel = styled(AmpPanel)<{ $marginLeft?: number }>`
   left: ${p =>
     `calc(

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/RegulatoryAreas/index.tsx
@@ -1,7 +1,6 @@
 import { useGetRegulatoryLayersQuery } from '@api/regulatoryLayersAPI'
 import { getOpenedPanel } from '@features/Dashboard/slice'
 import { Dashboard } from '@features/Dashboard/types'
-import { LayerSelector } from '@features/layersSelector/utils/LayerSelector.style'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { pluralize } from '@mtes-mct/monitor-ui'
 import { groupBy } from 'lodash'
@@ -12,7 +11,7 @@ import { Accordion } from '../Accordion'
 import { SelectedAccordion } from '../SelectedAccordion'
 import { ListLayerGroup } from './ListLayerGroup'
 import { RegulatoryPanel } from './Panel'
-import { SelectedLayerList } from '../style'
+import { SelectedLayerList, StyledLayerList } from '../style'
 
 import type { RegulatoryLayerCompactFromAPI } from 'domain/entities/regulatory'
 
@@ -115,12 +114,6 @@ export const RegulatoryAreas = forwardRef<HTMLDivElement, RegulatoriesAreasProps
   }
 )
 
-const StyledLayerList = styled(LayerSelector.LayerList)`
-  overflow: hidden;
-  height: auto;
-  max-height: 100%;
-`
-
 const StyledPanel = styled(RegulatoryPanel)<{ $marginLeft: number }>`
   left: ${p =>
     `calc(

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/VigilanceAreas/index.tsx b/frontend/src/features/Dashboard/components/DashboardForm/VigilanceAreas/index.tsx
@@ -1,7 +1,6 @@
 import { useGetVigilanceAreasQuery } from '@api/vigilanceAreasAPI'
 import { getOpenedPanel } from '@features/Dashboard/slice'
 import { Dashboard } from '@features/Dashboard/types'
-import { LayerSelector } from '@features/layersSelector/utils/LayerSelector.style'
 import { VigilanceArea } from '@features/VigilanceArea/types'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { pluralize } from '@mtes-mct/monitor-ui'
@@ -12,7 +11,7 @@ import { Accordion } from '../Accordion'
 import { SelectedAccordion } from '../SelectedAccordion'
 import { Layer } from './Layer'
 import { Panel } from './Panel'
-import { SelectedLayerList } from '../style'
+import { SelectedLayerList, StyledLayerList } from '../style'
 
 type VigilanceAreasProps = {
   columnWidth: number
@@ -63,7 +62,6 @@ export const VigilanceAreas = forwardRef<HTMLDivElement, VigilanceAreasProps>(
         >
           <StyledLayerList
             $baseLayersLength={vigilanceAreas.length}
-            $maxHeight={100}
             $showBaseLayers={isExpanded}
             data-cy="dashboard-vigilance-areas-list"
           >
@@ -97,10 +95,6 @@ export const VigilanceAreas = forwardRef<HTMLDivElement, VigilanceAreasProps>(
   }
 )
 
-const StyledLayerList = styled(LayerSelector.LayerList)`
-  height: auto;
-  overflow: hidden;
-`
 const StyledPanel = styled(Panel)<{ $marginLeft: number }>`
   left: ${p =>
     `calc(

diff --git a/frontend/src/features/Dashboard/components/DashboardForm/style.ts b/frontend/src/features/Dashboard/components/DashboardForm/style.ts
@@ -1,3 +1,4 @@
+import { LayerSelector } from '@features/layersSelector/utils/LayerSelector.style'
 import styled from 'styled-components'
 
 export const SelectedLayerList = styled.ul`
@@ -6,3 +7,9 @@ export const SelectedLayerList = styled.ul`
   max-height: 100%;
   color: ${p => p.theme.color.slateGray};
 `
+
+export const StyledLayerList = styled(LayerSelector.LayerList)`
+  overflow: hidden;
+  height: auto;
+  max-height: 100%;
+`