DateRange picker styling is misaligned and dates are not visible on h…

[ajlai-orkes]

…over

https://orkes.atlassian.net/browse/CCOR-13545

Pull Request type

• Bugfix
• Feature
• Refactoring (no functional changes, no api changes)
• Build related changes
• WHOSUSING.md
• Other (please describe):

NOTE: Please remember to run ./gradlew spotlessApply to fix any format violations.

Changes in this PR

Describe the new behavior from this PR, and why it's needed
Issue #

Alternatives considered

Fix execution date range picker alignment, hover, and layout (CCOR-13545)

Summary

Fixes several visual and interaction bugs in the date range menu on the execution search pages. It also removes a duplicate copy of the component so agent executions get the same fixes.

Problems

• The menu arrow pointed at the middle of the whole label-and-value row instead of at the date/time value.
• Clicks on the Absolute and Relative tabs bubbled up to the row's toggle handler and closed the menu.
• In the Absolute tab, the calendar took 8 of 12 grid columns but was narrower than that, so it sat far away from the Start time From/To inputs.
• Day numbers drifted out of line with the weekday headers, by up to ~8px by Saturday. Our day styles were loaded before react-datepicker's own CSS, which is only injected when the calendar first opens, so the library's margins won.
• Hovering a day changed its width, which pushed the days next to it sideways.
• Selected days were taller than they were wide because of a scale(1.1) transform and extra top padding.
• Agent executions used an older copy of DateControlComponent and DatePickerComponent, so none of these fixes reached it.

Changes

• DateControlComponent
• The tooltip now wraps only the date/time value and uses placement="bottom" with offset [0, 8], so the arrow is centered on the value.
• Only the label and the value toggle the menu, so clicks inside the menu no longer close it.
• New optional menuPlacement prop (default bottom). Controls placed at the right edge of a page can pass bottom-end so the menu opens inward and stays on screen.
• DatePickerComponent: The Absolute tab grid is now calendar md: "auto" and inputs md: "grow" with 24px spacing, which removes the empty column.
• CustomDateRangePicker.scss
• Day rules are nested under .react-datepicker, so they win whatever order the stylesheets load in.
• Day cells are a fixed 36×36 with border-box and a 2px margin. Hover no longer changes the size.
• Removed scale(1.1) and the extra padding, and kept the 0.3rem rounded squares.
• Agent executions: Basic and advanced search now import pages/executions/DateControlComponent. The duplicate agent copies of the control and picker are deleted.

https://www.loom.com/share/a8fae0c7083648ff85b70c2b9c9799b8