From a23174849c2a31b49c461fdf8bf7b66f3977a1cf Mon Sep 17 00:00:00 2001
From: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
Date: Thu, 6 Jun 2024 10:49:59 +0100
Subject: [PATCH] TimePicker: Fix bug where recent timeranges is cut off
 (#88795)

---
 .../TimeRangePicker/TimePickerContent.tsx          | 14 ++++++++++----
 .../TimeRangePicker/TimeRangeList.tsx              |  5 -----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
index f7662eb89d2..f8d9b847cf1 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
@@ -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) => ({
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx
index b47ed62cd22..76676a5bba6 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx
@@ -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',
-  }),
 });