Fix alignment and usable width for Customizer's Schedule date/time fields

[rkradadiya]

I have found a design issue in Schedule your customization changes to publish.
Need improvement for design under the customize input box of Schedule.

[mukesh27]

Hi there!

Yes there is alignment issue in fields and it is bug.

[Laxman Prajapati]

Created patch.

[dlh]

Hi! Thanks for the ticket and the patch. Feedback from the design team would be great before moving this ticket into a milestone. The accessibility team might also want to weigh on based on their recent work in #48420.

Separately, please ensure that the patch follows the ​CSS coding standards for spacing and selector structure.

[Laxman Prajapati]

As per CSS coding standards, We have updated the patch. o, Can you please ignore "51249.patch" this one and please consider the correct solution is "51249.1.patch" this one.

[mukesh27]

Thanks for the patch @laxman-prajapati

Patch looks fine for me but i think margin top is not need to make top space. let's wait for design team feedback on this.

.date-time-fields .day-fields.clear,
.date-time-fields .time-fields.clear {
   margin-top: 5px;
} 

[Laxman Prajapati]

@mukesh27

Yes sure, If not need, we can remove it. I have added only for top spacing purpose.

Thanks,

Replying to mukesh27:

Thanks for the patch @laxman-prajapati

Patch looks fine for me but i think margin top is not need to make top space. let's wait for design team feedback on this.

.date-time-fields .day-fields.clear,
.date-time-fields .time-fields.clear {
   margin-top: 5px;
} 

[karmatosed]

I am not sure that top margin is needed and also unsure this patch applies now. It could be due to the matter of time that has passed. For now, lets get a check and refresh on this and see if we can review.

[ankitkumarshah]

Hi @karmatosed,
I have checked the issue in the trunk, and it still persists.

Implementing the following resolves the issue:

date-time-fields .date-input.day,
.date-time-fields .date-input.hour,
.date-time-fields .date-input.minute {
	width: 46px;
	width: 52px;
}

.wp-core-ui .date-time-fields .day-fields.clear select,
.wp-core-ui .date-time-fields .time-fields.clear select {
	vertical-align: top;
}

Trac ticket: #51249

## What

• Increased the width of date-time input fields from 46px to 52px
• Added vertical alignment to select fields in day and time controls

## Why

• The previous width of 46px was causing text to be truncated
• Select fields were misaligned with neighboring elements, creating visual inconsistency

## How

• Updated width property in date-time input styles to accommodate longer text
• Added vertical align: top to select elements within day and time field groups

## Testing Instructions

1. Go to Customizer
2. Navigate to any panel with date-time controls
3. Verify date/time input fields show complete numbers without truncation
4. Check that select fields are properly aligned with neighboring inputs

## Screenshots
#### Before patch:

#### After Patch:

For input type number width it not look good normal state but when hover over the changes make sense.

[sabernhardt]

I think the right padding could be removed instead of changing the width values, and the tiny-text class could achieve that (as I mentioned on PR 8178).

Hi @sabernhardt,
I have made the necessary changes to this PR. Please have a look at it at your convenience.
Thank you!

[ankitkumarshah]

Hi @audrasjb,
Would you mind looking at this PR and let me know if it looks good to you?
Thanks!

I restarted the unit tests since a lot of them were failing.

Hi @audrasjb,
It seems all the tests are passing now.

[audrasjb]

Self assigning for review.

[audrasjb]

In 59942:

Customizer: Improve input field widths and alignment for date/time controls.

This changeset fixes some issues where Select fields were misaligned with neighboring elements, creating visual inconsistency in the customizer.

Props rkradadiya, mukesh27, laxman-prajapati, dlh, karmatosed, ankitkumarshah, sabernhardt.
Fixes #51249.

committed in https://core.trac.wordpress.org/changeset/59942