Polish datetime popover. (#18235)

* Polish datetime popover.

The popover inherited a min-width of 260, which is insufficient, then overrode it just for the edit-post-schedule flow. This means the datetime component looks fine in the sidebar, but no-where else.

This PR changes the base inherited minwidth to 270, so the component can be used outside of the sidebar.

* Better code, embrace padding.

The DateTime component as it exists, references a 3rd party library that uses lots of inline styles and hard-coded widths and dimensions.

Having explored various other approaches now, there are only two ways to fix this.

1. Actually add the padding to the component itself. This is the only way to make it work inside popovers when used outside of WordPress.
2. Do a major refactor to include a different datetime library.

In order to move forward, I'm therefore embracing the padding.

packages/components/src/date-time/style.scss

@@ -5,8 +5,10 @@
 /*rtl:end:ignore*/
 
 .components-datetime {
+	padding: $grid-size-large;
+
 	.components-datetime__calendar-help {
-		padding: $grid-size;
+		padding: $grid-size-large;
 
 		h4 {
 			margin: 0;
@@ -16,8 +18,6 @@
 	.components-datetime__date-help-button {
 		display: block;
 		margin-left: auto;
-		margin-right: $grid-size;
-		margin-top: 0.5em;
 	}
 
 	fieldset {
@@ -28,21 +28,33 @@
 
 	select,
 	input {
-		box-sizing: border-box;
-		height: 28px;
-		vertical-align: middle;
-		padding: 0;
 		@include input-style__neutral();
 	}
+
+	// Override inherited conflicting styles to be consistent.
+	select,
+	input[type="number"],
+	.components-button {
+		height: 30px;
+		margin-top: 0;
+		margin-bottom: 0;
+	}
 }
 
 .components-datetime__date {
 	min-height: 236px;
 	border-top: 1px solid $light-gray-500;
-	margin-left: -$grid-size;
-	margin-right: -$grid-size;
 
 	// Override external DatePicker styles.
+	.CalendarMonthGrid {
+		// The included component contains an arbitrary 13px padding that misaligns things.
+		margin-left: -13px;
+	}
+
+	.DayPickerNavigation_leftButton__horizontalDefault {
+		left: 0;
+	}
+
 	.CalendarMonth_caption {
 		font-size: $default-font-size;
 	}
@@ -82,11 +94,15 @@
 }
 
 .components-datetime__time {
-	margin-bottom: 1em;
+	padding-bottom: $grid-size-large;
 
 	fieldset {
-		margin-top: 0.5em;
 		position: relative;
+		margin-bottom: 0.5em;
+	}
+
+	fieldset + fieldset {
+		margin-bottom: 0;
 	}
 
 	.components-datetime__time-field-am-pm fieldset {

packages/edit-post/src/components/sidebar/post-schedule/style.scss

@@ -6,11 +6,3 @@
 .components-button.edit-post-post-schedule__toggle {
 	text-align: right;
 }
-
-.edit-post-post-schedule__dialog .components-popover__content {
-	padding: 10px;
-
-	@include break-medium {
-		width: 270px;
-	}
-}

packages/editor/src/components/post-publish-panel/style.scss

@@ -79,6 +79,12 @@
 	.editor-post-visibility__dialog-legend {
 		display: none;
 	}
+
+	// The DateTime component has an intrinsic padding in order for the horizontal scrolling to function inside a popover.
+	// We unset that here when used inline.
+	.components-datetime {
+		padding: 0;
+	}
 }
 
 .post-publish-panel__postpublish .components-panel__body {