diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx
index 943637d2722..4e7d10fa22f 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx
@@ -80,14 +80,16 @@ function PanelDataPaneRendered({ model }: SceneComponentProps<PanelDataPane>) {
 
   return (
     <div className={styles.dataPane} data-testid={selectors.components.PanelEditor.DataPane.content}>
-      <TabsBar className={styles.tabsBar}>
+      <TabsBar hideBorder className={styles.tabsBar}>
         {tabs.map((t) => t.renderTab({ active: t.tabId === tab, onChangeTab: () => model.onChangeTab(t) }))}
       </TabsBar>
-      <ScrollContainer backgroundColor="primary">
-        <TabContent className={styles.tabContent}>
-          <Container>{currentTab && <currentTab.Component model={currentTab} />}</Container>
-        </TabContent>
-      </ScrollContainer>
+      <div className={styles.tabBorder}>
+        <ScrollContainer>
+          <TabContent className={styles.tabContent}>
+            <Container>{currentTab && <currentTab.Component model={currentTab} />}</Container>
+          </TabContent>
+        </ScrollContainer>
+      </div>
     </div>
   );
 }
@@ -116,13 +118,18 @@ function getStyles(theme: GrafanaTheme2) {
       height: '100%',
       width: '100%',
     }),
-    tabContent: css({
-      padding: theme.spacing(2),
+    tabBorder: css({
+      background: theme.colors.background.primary,
       border: `1px solid ${theme.colors.border.weak}`,
       borderLeft: 'none',
       borderBottom: 'none',
       borderTopRightRadius: theme.shape.radius.default,
       flexGrow: 1,
+      overflow: 'hidden',
+    }),
+    tabContent: css({
+      padding: theme.spacing(2),
+      height: '100%',
     }),
     tabsBar: css({
       flexShrink: 0,