Summary
When adding new fields via the atlas map wizard or the new-field fields page, a panel shows the list of unique cultivations for the selected fields and a submit button below them. When a large number of different cultivations are selected, the card grows tall enough to push the submit button below the visible viewport. Because the panel lives inside a fixed-height container (the map), the user cannot scroll to reach the button.
Affected routes / components
| File |
Role |
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsx |
Renders the MapGL container with a fixed height (calc(100vh - 64px - 147px)) that hosts the panel. |
fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.fields.tsx |
Renders NewFieldsSidebar whose card can grow unboundedly when many fields are listed. |
fdm-app/app/components/blocks/atlas/atlas-panels.tsx - FieldsPanelSelection |
Renders the cultivation list + submit button. Has no max-height or scroll on the CardContent. |
fdm-app/app/components/blocks/fields-new/sidebar.tsx - NewFieldsSidebar |
Renders the field list inside a CardContent with no height constraint. |
Steps to reproduce
- Start the application and navigate to Bedrijf toevoegen -> Kaart (farm create wizard atlas step).
- Zoom in on an area with many fields that have many different cultivations (e.g. select 10+ fields each with a unique crop type).
- Observe the "Percelen" selection panel on the left side of the map.
- Expected: The submit button ("Sla geselecteerde percelen op") is always visible and reachable.
- Actual: The card listing the cultivations grows and pushes the submit button below the bottom edge of the map. The button cannot be clicked.
The same issue can be reproduced on the new-field fields page (/farm/:b_id_farm/:calendar/field/new/fields) when many fields with different cultivations appear in the sidebar.
Root cause
FieldsPanelSelection (atlas-panels.tsx)
The panel is placed inside the MapGL component which has a fixed pixel height. The panel container inside the map is a grid gap-4 w-[350px] div with no overflow handling. Inside FieldsPanelSelection, the CardContent holds an unconstrained list of cultivations - no max-height or overflow-y: auto - so the entire card grows beyond the fixed-height map viewport, pushing the CardFooter submit button off screen.
NewFieldsSidebar (sidebar.tsx)
The CardContent that renders SidebarPage items (one per field) also has no height constraint. When many fields are added, the sidebar card expands and can push content off screen on smaller viewports.
Proposed fix
1. Constrain and scroll the cultivations list in FieldsPanelSelection
Add a max-h and overflow-y-auto wrapper around the cultivations list inside CardContent so the card stays within the map panel area and the submit button remains visible.
File: fdm-app/app/components/blocks/atlas/atlas-panels.tsx
2. Make the fields-panel container scrollable
Add overflow-y-auto and max-h-full to the panel container div so the whole stack of panels can scroll within the fixed-height map if needed.
File: fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsx
3. Constrain the field list in NewFieldsSidebar
Add a max-h and overflow-y-auto wrapper around the SidebarPage inside CardContent so the sidebar card does not grow without bound.
File: fdm-app/app/components/blocks/fields-new/sidebar.tsx
Acceptance criteria
Summary
When adding new fields via the atlas map wizard or the new-field fields page, a panel shows the list of unique cultivations for the selected fields and a submit button below them. When a large number of different cultivations are selected, the card grows tall enough to push the submit button below the visible viewport. Because the panel lives inside a fixed-height container (the map), the user cannot scroll to reach the button.
Affected routes / components
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsxMapGLcontainer with a fixed height (calc(100vh - 64px - 147px)) that hosts the panel.fdm-app/app/routes/farm.$b_id_farm.$calendar.field.new.fields.tsxNewFieldsSidebarwhose card can grow unboundedly when many fields are listed.fdm-app/app/components/blocks/atlas/atlas-panels.tsx-FieldsPanelSelectionmax-heightor scroll on theCardContent.fdm-app/app/components/blocks/fields-new/sidebar.tsx-NewFieldsSidebarCardContentwith no height constraint.Steps to reproduce
The same issue can be reproduced on the new-field fields page (
/farm/:b_id_farm/:calendar/field/new/fields) when many fields with different cultivations appear in the sidebar.Root cause
FieldsPanelSelection(atlas-panels.tsx)The panel is placed inside the
MapGLcomponent which has a fixed pixel height. The panel container inside the map is agrid gap-4 w-[350px]div with no overflow handling. InsideFieldsPanelSelection, theCardContentholds an unconstrained list of cultivations - nomax-heightoroverflow-y: auto- so the entire card grows beyond the fixed-height map viewport, pushing theCardFootersubmit button off screen.NewFieldsSidebar(sidebar.tsx)The
CardContentthat rendersSidebarPageitems (one per field) also has no height constraint. When many fields are added, the sidebar card expands and can push content off screen on smaller viewports.Proposed fix
1. Constrain and scroll the cultivations list in
FieldsPanelSelectionAdd a
max-handoverflow-y-autowrapper around the cultivations list insideCardContentso the card stays within the map panel area and the submit button remains visible.File:
fdm-app/app/components/blocks/atlas/atlas-panels.tsx2. Make the
fields-panelcontainer scrollableAdd
overflow-y-autoandmax-h-fullto the panel container div so the whole stack of panels can scroll within the fixed-height map if needed.File:
fdm-app/app/routes/farm.create.$b_id_farm.$calendar.atlas.tsx3. Constrain the field list in
NewFieldsSidebarAdd a
max-handoverflow-y-autowrapper around theSidebarPageinsideCardContentso the sidebar card does not grow without bound.File:
fdm-app/app/components/blocks/fields-new/sidebar.tsxAcceptance criteria