Skip to content

Fix: Keep time panel aligned when todayButton is used with showTimeSelect#85

Open
balajis-qb wants to merge 1 commit into
mainfrom
issue-6237/fix/today-button-time-select-layout
Open

Fix: Keep time panel aligned when todayButton is used with showTimeSelect#85
balajis-qb wants to merge 1 commit into
mainfrom
issue-6237/fix/today-button-time-select-layout

Conversation

@balajis-qb

Copy link
Copy Markdown
Collaborator

Description

Linked issue: Hacker0x01#6237

Problem
When both showTimeSelect and todayButton were used together, the time panel broke out of the normal layout. The today-button was rendered before the time section in the DOM, so the right-floated time panel got pushed below it instead of sitting next to the month view. This was "fixed" with a CSS hack that forced the time panel to position: absolute with a negative right offset — which detached it from the popper's layout box entirely. As a result:

  • The time panel appeared visually detached/shifted, sitting lower than the date panel.
  • Near the right edge of the viewport, the popper would shift to stay on-screen, but the absolutely-positioned time panel didn't shift with it and could get clipped or disappear.

Changes

  • Reordered the DOM so the time section renders before the today-button (calendar.tsx), so both the month view and time panel stay as normal floats instead of needing the absolute-position hack.
  • Removed the --with-today-button absolute-positioning hack and its related nav-arrow CSS exceptions in datepicker.scss, now that the time panel never leaves normal flow.
  • The today-button now clears only the month view's column (clear: left + a --with-time-select width modifier) instead of spanning full width, so it sits directly under the calendar rather than under the time panel too.
  • The time list's height now stretches to cover the month view plus the today-button's height (previously it only matched the month view), via the existing ResizeObserver-driven height sync in time.tsx.
  • Extracted the repeated 85px time-container width into a $datepicker__time-container-width Sass variable instead of duplicating the magic number in four places.
  • Added/updated tests covering the DOM order, the new CSS modifier class, and the height calculation that now includes the today-button.

Contribution checklist

  • I have followed the contributing guidelines.
  • I have added sufficient test coverage for my changes.
  • I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.

…wTimeSelect

The time panel relied on an absolute-positioning hack whenever a
todayButton was rendered alongside showTimeSelect, since the button
was rendered before the time section in the DOM, pushing the
right-floated time panel below it. That detached the panel from the
popper's layout box, causing it to misalign and get clipped near the
viewport edge.

Render the time section before the today-button so both floats stay
in normal flow, and let the today-button clear only the month view's
column instead of spanning full width. The time select's height now
stretches to cover the date picker + today button combined height,
instead of just the date picker as before.

Closes Hacker0x01#6237
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant