[EuiDatePickerRange] Use container queries for better inline respon…

…siveness

(sadly, jsdom errors on this, so we have to add another console error exclusion)

scripts/jest/setup/throw_on_console_error.js

@@ -1,4 +1,4 @@
-import { format } from 'util'
+import { format } from 'util';
 
 // Fail if a test ends up `console.error`-ing, e.g. if React logs because of a
 // failed prop types check.
@@ -16,5 +16,15 @@ console.error = (message, ...rest) => {
     return;
   }
 
+  // @see https://github.com/jsdom/jsdom/issues/2177
+  // JSDOM doesn't yet know how to parse @container CSS queries -
+  // all we can do is silence its errors for now
+  if (
+    typeof message === 'string' &&
+    message.startsWith('Error: Could not parse CSS stylesheet')
+  ) {
+    return;
+  }
+
   throw new Error(format(message, ...rest));
 };

src/components/date_picker/date_picker_range.styles.ts

@@ -30,6 +30,27 @@ export const euiDatePickerRangeInlineStyles = (
 ) => {
   const { euiTheme } = euiThemeContext;
 
+  // Use a container query to stack date pickers vertically if the container is
+  // not wide enough to fit both. We need a fn for this to render two width queries,
+  // depending on whether time selection is being rendered or not
+  const containerQuery = (containerMaxWidth: number) => `
+    display: block;
+    container-type: inline-size;
+
+    .euiFormControlLayout__childrenWrapper {
+      // Use static px widths for now, since render behavior comes from a third party library
+      @container (max-width: ${containerMaxWidth * 2}px) {
+        // Unset grid display
+        display: block !important;
+
+        // Center and point the default delimiter arrow downwards
+        & > .euiText > [data-icon-type='sortRight'] {
+          transform: rotate(90deg);
+          margin-inline: auto;
+        }
+      }
+    }`;
+
   return {
     inline: css`
       .euiFormControlLayoutDelimited {
@@ -75,6 +96,12 @@ export const euiDatePickerRangeInlineStyles = (
         padding: 0;
       }
     `,
+    responsive: css`
+      ${containerQuery(275)}
+    `,
+    responsiveWithTimeSelect: css`
+      ${containerQuery(350)}
+    `,
     shadow: css`
       .euiFormControlLayoutDelimited {
         ${euiShadowMedium(euiThemeContext)}

src/components/date_picker/date_picker_range.tsx

@@ -121,8 +121,18 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
   const cssStyles = [styles.euiDatePickerRange];
 
   if (inline) {
+    // Determine the inline container query to use based on the width of the react-datepicker
+    const hasTimeSelect =
+      startDateControl.props.showTimeSelect ||
+      endDateControl.props.showTimeSelect;
+
     const inlineStyles = euiDatePickerRangeInlineStyles(euiTheme);
     cssStyles.push(inlineStyles.inline);
+    cssStyles.push(
+      hasTimeSelect
+        ? inlineStyles.responsiveWithTimeSelect
+        : inlineStyles.responsive
+    );
     if (shadow) cssStyles.push(inlineStyles.shadow);
   }