TimePicker: Fix bug where recent timeranges is cut off (#88795)

pull/88827/head^2
Joao Silva 2 years ago committed by GitHub
parent a21a9b9c6c
commit a23174849c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 6
      packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
  2. 5
      packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx

@ -87,11 +87,13 @@ export const TimePickerContentWithScreenSize = (props: PropsWithScreenSize) => {
placeholder={t('time-picker.content.filter-placeholder', 'Search quick ranges')}
/>
</div>
<div className={styles.scrollContent}>
{!isFullscreen && <NarrowScreenForm {...props} historyOptions={historyOptions} />}
{!hideQuickRanges && (
<TimeRangeList options={filteredQuickOptions} onChange={onChangeTimeOption} value={timeOption} />
)}
</div>
</div>
)}
{isFullscreen && (
<div className={styles.leftSide}>
@ -307,6 +309,10 @@ const getStyles = (
spacing: css({
marginTop: '16px',
}),
scrollContent: css({
overflowY: 'auto',
scrollbarWidth: 'thin',
}),
});
const getNarrowScreenStyles = (theme: GrafanaTheme2) => ({

@ -55,7 +55,6 @@ const Options = ({ options, value, onChange, title }: Props) => {
onKeyDown={handleKeys}
ref={localRef}
aria-roledescription={t('time-picker.time-range.aria-role', 'Time range selection')}
className={styles.list}
>
{options.map((option, index) => (
<TimeRangeOption
@ -97,8 +96,4 @@ const getOptionsStyles = () => ({
flexGrow: 1,
alignItems: 'flex-start',
}),
list: css({
overflowY: 'auto',
scrollbarWidth: 'thin',
}),
});

Loading…
Cancel
Save