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