IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Joao Silva 2024-06-06 10:49:59 +01:00 committed by GitHub
parent a21a9b9c6c
commit a23174849c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

5
packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx
View File

@ -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',
}),
});