Fix: Keep time panel aligned when todayButton is used with showTimeSelect#6307
Open
balajis-qb wants to merge 1 commit into
Open
Fix: Keep time panel aligned when todayButton is used with showTimeSelect#6307balajis-qb wants to merge 1 commit into
balajis-qb wants to merge 1 commit into
Conversation
…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 Report✅ All modified and coverable lines are covered by tests. 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. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Linked issue: #6237
Problem
When both
showTimeSelectandtodayButtonwere 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 toposition: absolutewith a negativerightoffset — which detached it from the popper's layout box entirely. As a result:Changes
calendar.tsx), so both the month view and time panel stay as normal floats instead of needing the absolute-position hack.--with-today-buttonabsolute-positioning hack and its related nav-arrow CSS exceptions indatepicker.scss, now that the time panel never leaves normal flow.clear: left+ a--with-time-selectwidth modifier) instead of spanning full width, so it sits directly under the calendar rather than under the time panel too.ResizeObserver-driven height sync intime.tsx.85pxtime-container width into a$datepicker__time-container-widthSass variable instead of duplicating the magic number in four places.Contribution checklist