fix overflowing date picker inside various ml pages

x-pack/platform/packages/private/ml/date_picker/src/components/date_picker_wrapper.tsx

@@ -90,10 +90,6 @@ interface DatePickerWrapperProps {
   /**
    * Boolean flag to set use of flex group wrapper
    */
-  flexGroup?: boolean;
-  /**
-   * Boolean flag to disable the date picker
-   */
   isDisabled?: boolean;
   /**
    * Boolean flag to force change from 'Refresh' to 'Update' state
@@ -123,7 +119,6 @@ export const DatePickerWrapper: FC<DatePickerWrapperProps> = (props) => {
     isLoading = false,
     showRefresh,
     width,
-    flexGroup = true,
     isDisabled = false,
     needsUpdate,
     onRefresh,
@@ -363,6 +358,8 @@ export const DatePickerWrapper: FC<DatePickerWrapperProps> = (props) => {
     </>
   );
 
+  const flexGroup = !isTimeRangeSelectorEnabled || isAutoRefreshOnly === true;
+
   const wrapped = flexGroup ? (
     <EuiFlexGroup gutterSize="s" alignItems="center">
       {flexItems}

x-pack/platform/plugins/private/data_visualizer/public/application/data_drift/data_drift_page.tsx

@@ -115,7 +115,6 @@ export const PageHeader: FC<PageHeaderProps> = ({ onRefresh, needsUpdate }) => {
           isAutoRefreshOnly={!hasValidTimeField}
           showRefresh={!hasValidTimeField}
           width="full"
-          flexGroup={!hasValidTimeField}
           onRefresh={onRefresh}
           needsUpdate={needsUpdate}
         />,

x-pack/platform/plugins/shared/aiops/public/components/page_header/page_header.tsx

@@ -80,7 +80,6 @@ export const PageHeader: FC = () => {
           isAutoRefreshOnly={!hasValidTimeField}
           showRefresh={!hasValidTimeField}
           width="full"
-          flexGroup={!hasValidTimeField}
         />,
         hasValidTimeField && (
           <FullTimeRangeSelector