Replace hand-rolled dropdown on the dashboard and menu-related UI fixes

[apata]

Changes

• Removes handrolled dropdowns and replaces them with headlessui Popovers: https://headlessui.com/v1/react/popover

  • Also tried to use headlessui Menu component for datepicker, but unfortunately those were too opinionated to work well with our keybinds.

  • Had to refactor the datepicker: visually that means extremely minor changes (first group doesn't have top padding)

• Fixes the issue with calendars positioning off screen, aligning their right edge to right of dropdown or right of visible page on smaller screens.

  • Removes flatpickr position styles from CSS and applies position styles with TW.

• Fixes issues with Dashboard modals not receiving focus

• Fixes issues with Escape clearing filters instead of closing opened menu / popover

  • This was a bit hacky due to headlessui API: we have to stop Escape propagating from Popover.Button (which receives focus on escaping from Popover). If the button isn't blurred immediately, user will have to tab off the button for the clear all filters keybind to work.

• Fixes issues with multiple dropdowns being openable at the same time

• Optimises top bar components re-rendering too many times for no reason

One little issue remains: the calendar doesn't close when navigating to other menus with the keyboard, nor does it capture focus or Escape, and close itself on Escape or Tab out. I tried various ways to render the calendars 1) in headlessui dialogs 2) in headlessui popovers etc, but wasn't able to get it working.

Tests

• Automated tests have been added

Changelog

• Entry has been added to changelog
• This PR does not make a user-facing change

Documentation

• This change does not need a documentation update

Dark mode

• The UI has been tested both in dark and light mode

[github-actions]

Preview environment👷🏼‍♀️🏗️
PR-5037