Fix Date picker content when pane is splitted (#46900). Show narrow(m… (#47206)

* Fix Date picker content when pane is splitted (#46900). Show narrow(mobile) content version.

* Change from boolean to value override and use it in calendar styles. Change calendar modal to be in center of screen.

* Be sure width division only happens on split view

Co-authored-by: Kristina Durivage <kristina.durivage@grafana.com>

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx

@@ -45,6 +45,7 @@ export interface TimeRangePickerProps extends Themeable {
   onZoom: () => void;
   history?: TimeRange[];
   hideQuickRanges?: boolean;
+  widthOverride?: number;
 }
 
 export interface State {
@@ -68,6 +69,7 @@ export function UnthemedTimeRangePicker(props: TimeRangePickerProps): ReactEleme
     onChangeTimeZone,
     onChangeFiscalYearStartMonth,
     hideQuickRanges,
+    widthOverride,
   } = props;
 
   const onChange = (timeRange: TimeRange) => {
@@ -129,6 +131,7 @@ export function UnthemedTimeRangePicker(props: TimeRangePickerProps): ReactEleme
               quickOptions={quickOptions}
               history={history}
               showHistory
+              widthOverride={widthOverride}
               onChangeTimeZone={onChangeTimeZone}
               onChangeFiscalYearStartMonth={onChangeFiscalYearStartMonth}
               hideQuickRanges={hideQuickRanges}

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx

@@ -37,7 +37,6 @@ export const getStyles = (theme: GrafanaTheme2, isReversed = false) => {
     modal: css`
       position: fixed;
       top: 20%;
-      left: 25%;
       width: 100%;
       z-index: ${theme.zIndex.modal};
     `,

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx

@@ -1,7 +1,6 @@
 import { GrafanaTheme2, isDateTime, rangeUtil, RawTimeRange, TimeOption, TimeRange, TimeZone } from '@grafana/data';
 import { css, cx } from '@emotion/css';
 import React, { memo, useMemo, useState } from 'react';
-import { useMedia } from 'react-use';
 import { stylesFactory, useTheme2 } from '../../../themes';
 import { CustomScrollbar } from '../../CustomScrollbar/CustomScrollbar';
 import { Icon } from '../../Icon/Icon';
@@ -29,6 +28,7 @@ interface Props {
   /** Reverse the order of relative and absolute range pickers. Used to left align the picker in forms */
   isReversed?: boolean;
   hideQuickRanges?: boolean;
+  widthOverride?: number;
 }
 
 export interface PropsWithScreenSize extends Props {
@@ -60,7 +60,7 @@ export const TimePickerContentWithScreenSize: React.FC<PropsWithScreenSize> = (p
   const isContainerTall =
     (isFullscreen && showHistory) || (!isFullscreen && ((showHistory && !isHistoryEmpty) || !hideQuickRanges));
   const theme = useTheme2();
-  const styles = getStyles(theme, isReversed, hideQuickRanges, isContainerTall);
+  const styles = getStyles(theme, isReversed, hideQuickRanges, isContainerTall, isFullscreen);
   const historyOptions = mapToHistoryOptions(history, timeZone);
   const timeOption = useTimeOption(value.raw, quickOptions);
   const [searchTerm, setSearchQuery] = useState('');
@@ -112,9 +112,9 @@ export const TimePickerContentWithScreenSize: React.FC<PropsWithScreenSize> = (p
 };
 
 export const TimePickerContent: React.FC<Props> = (props) => {
+  const { widthOverride } = props;
   const theme = useTheme2();
-  const isFullscreen = useMedia(`(min-width: ${theme.breakpoints.values.lg}px)`);
-
+  const isFullscreen = (widthOverride || window.innerWidth) >= theme.breakpoints.values.lg;
   return <TimePickerContentWithScreenSize {...props} isFullscreen={isFullscreen} />;
 };
 
@@ -251,22 +251,18 @@ const useTimeOption = (raw: RawTimeRange, quickOptions: TimeOption[]): TimeOptio
   }, [raw, quickOptions]);
 };
 
-const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRanges, isContainerTall) => {
+const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRanges, isContainerTall, isFullscreen) => {
   return {
     container: css`
       background: ${theme.colors.background.primary};
       box-shadow: ${theme.shadows.z3};
       position: absolute;
       z-index: ${theme.zIndex.dropdown};
-      width: 546px;
+      width: ${isFullscreen ? '546px' : '262px'};
       top: 116%;
       border-radius: 2px;
       border: 1px solid ${theme.colors.border.weak};
       ${isReversed ? 'left' : 'right'}: 0;
-
-      @media only screen and (max-width: ${theme.breakpoints.values.lg}px) {
-        width: 262px;
-      }
     `,
     body: css`
       display: flex;
@@ -282,13 +278,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRang
       order: ${isReversed ? 1 : 0};
     `,
     rightSide: css`
-      width: 40% !important;
+      width: ${isFullscreen ? '40%' : '100%'}; !important;
       border-right: ${isReversed ? `1px solid ${theme.colors.border.weak}` : 'none'};
       display: flex;
       flex-direction: column;
-      @media only screen and (max-width: ${theme.breakpoints.values.lg}px) {
-        width: 100% !important;
-      }
     `,
     timeRangeFilter: css`
       padding: ${theme.spacing(1)};

public/app/features/explore/ExploreTimeControls.tsx

@@ -92,6 +92,7 @@ export class ExploreTimeControls extends Component<Props> {
         {...timePickerCommonProps}
         timeSyncButton={timeSyncButton}
         isSynced={syncedTimes}
+        widthOverride={splitted ? window.innerWidth / 2 : undefined}
         onChange={this.onChangeTimePicker}
         onChangeTimeZone={onChangeTimeZone}
         onChangeFiscalYearStartMonth={onChangeFiscalYearStartMonth}