Custom stats calendar doesn't work on a touchscreen

[eatyourgreens]

Package

• lib-user

Describe the bug

The custom calendar dialog for user stats doesn't work on a touchscreen. You can't change the date range or close the modal dialog. The only option is to reload the page.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://www.zooniverse.org/users/eatyourgreens/stats?start_date=2024-10-28
2. Select custom date range.

Expected behavior

I should be able to select a custom date range.

Device information

Smartphone (please complete the following information):

• Device: iPhone
• OS: iOS
• Browser: WebKit
• Versio: 18

Additional context

The dialog is broken on any touchscreen device. Neither the close button, calendar, nor the Done button work.

[eatyourgreens]

The custom date picker doesn't pass the cancel option to React Rnd, so the default touch action is to drag the modal popup.

See the sub task popup for an example.

front-end-monorepo/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/InteractionLayer/components/SubTaskPopup/SubTaskPopup.js

Lines 86 to 93 in f54edb8

	const rndProps = {
	cancel: '.subtaskpopup-element-that-ignores-drag-actions',
	minHeight,
	minWidth,
	onDragStop,
	onResize,
	position: position || defaultPosition
	}

[eatyourgreens]

NB. the close button has a very specific class name, which isn't designed to be changed by users of the MovableModal component.

front-end-monorepo/packages/lib-react-components/src/Modal/components/ModalHeading/ModalHeading.js

Lines 36 to 40 in f54edb8

	<CloseButton
	className='subtaskpopup-element-that-ignores-drag-actions'
	closeFn={closeFn}
	color={color}
	/>

• See fix modal-subtask buttons on touch devices  #3568.