diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
index 7ac73a45cb4..89b90b8dc33 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
@@ -110,7 +110,7 @@ export const TimePickerFooter = (props: Props) => {
               aria-controls={fiscalYearSettingsId}
             />
           </TabsBar>
-          <TabContent>
+          <TabContent className={style.noBackground}>
             {editMode === 'tz' ? (
               <section
                 role="tabpanel"
@@ -183,6 +183,9 @@ const getStyle = (theme: GrafanaTheme2) => ({
   timeSettingContainer: css({
     paddingTop: theme.spacing(1),
   }),
+  noBackground: css({
+    background: 'inherit',
+  }),
   fiscalYearField: css({
     marginBottom: 0,
   }),