From 768943bd75720885288c36b7a5bcd37061784aad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 10 Mar 2025 13:26:00 +0100
Subject: [PATCH] Dashboard: Fixes issue with tabs with rows and default grid
 (#101865)

---
 .../layout-tabs/TabsLayoutManagerRenderer.tsx   | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManagerRenderer.tsx b/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManagerRenderer.tsx
index 375f2f779ff..8a9e5a6a8f6 100644
--- a/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManagerRenderer.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManagerRenderer.tsx
@@ -19,8 +19,8 @@ export function TabsLayoutManagerRenderer({ model }: SceneComponentProps<TabsLay
   const { isEditing } = dashboard.useState();
 
   return (
-    <>
-      <TabsBar className={styles.tabsWrapper}>
+    <div className={styles.tabLayoutContainer}>
+      <TabsBar className={styles.tabsBar}>
         <div className={styles.tabsRow}>
           <div className={styles.tabsContainer}>
             {tabs.map((tab) => (
@@ -35,12 +35,17 @@ export function TabsLayoutManagerRenderer({ model }: SceneComponentProps<TabsLay
       <TabContent className={styles.tabContentContainer}>
         {currentTab && <layout.Component model={layout} />}
       </TabContent>
-    </>
+    </div>
   );
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  tabsWrapper: css({
+  tabLayoutContainer: css({
+    display: 'flex',
+    flexDirection: 'column',
+    flex: '1 1 auto',
+  }),
+  tabsBar: css({
     overflow: 'hidden',
   }),
   tabsRow: css({
@@ -60,9 +65,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     backgroundColor: 'transparent',
     display: 'flex',
     flex: 1,
-    height: '100%',
-    overflow: 'auto',
-    scrollbarWidth: 'thin',
+    minHeight: 0,
     padding: '2px 2px 0 2px',
   }),
 });