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

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.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) => ({

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