Skip to content

Submit button unreachable when many different cultivations are selected #538

@SvenVw

Description

@SvenVw

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

  1. Start the application and navigate to Bedrijf toevoegen -> Kaart (farm create wizard atlas step).
  2. Zoom in on an area with many fields that have many different cultivations (e.g. select 10+ fields each with a unique crop type).
  3. Observe the "Percelen" selection panel on the left side of the map.
  4. Expected: The submit button ("Sla geselecteerde percelen op") is always visible and reachable.
  5. 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

  • When 10+ fields with different cultivations are selected on the atlas map, the submit button ("Sla geselecteerde percelen op") is always visible inside the panel without needing to resize the browser window.
  • The cultivations list scrolls vertically within the card when it overflows.
  • On the new-field fields page, the field sidebar scrolls when many fields are listed, and the submit button in the main content area remains reachable.
  • No visual regression on screens with fewer cultivations / fields.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions