Skip to content

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

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

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

Conversation

@balajis-qb

Copy link
Copy Markdown
Contributor

Description

Linked issue: #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
@codecov

codecov Bot commented Jul 13, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.32%. Comparing base (548a1f3) to head (014f05f).

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #6307      +/-   ##
==========================================
+ Coverage   99.29%   99.32%   +0.02%     
==========================================
  Files          30       30              
  Lines        3822     3824       +2     
  Branches     1648     1664      +16     
==========================================
+ Hits         3795     3798       +3     
+ Misses         26       25       -1     
  Partials        1        1              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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