From edf36d9ec0ae04f1a4cb2b8e0f669f4e74524299 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 8 Apr 2024 16:55:35 +0200
Subject: [PATCH] DashboardScene: Fixes issue with mobile responsive layout due
 to repeated grid item class (#85731)

---
 .../scene/DashboardGridItem.test.tsx           | 18 +++++++++++++++++-
 .../scene/DashboardGridItem.tsx                |  2 +-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/public/app/features/dashboard-scene/scene/DashboardGridItem.test.tsx b/public/app/features/dashboard-scene/scene/DashboardGridItem.test.tsx
index ea1a3647908..4a0ae48f83c 100644
--- a/public/app/features/dashboard-scene/scene/DashboardGridItem.test.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardGridItem.test.tsx
@@ -1,9 +1,11 @@
 import { getPanelPlugin } from '@grafana/data/test/__mocks__/pluginMocks';
 import { setPluginImportUtils } from '@grafana/runtime';
-import { SceneGridLayout } from '@grafana/scenes';
+import { SceneGridLayout, VizPanel } from '@grafana/scenes';
 
 import { activateFullSceneTree, buildPanelRepeaterScene } from '../utils/test-utils';
 
+import { DashboardGridItem } from './DashboardGridItem';
+
 setPluginImportUtils({
   importPanelPlugin: (id: string) => Promise.resolve(getPanelPlugin({})),
   getPanelPluginFromCache: (id: string) => undefined,
@@ -116,4 +118,18 @@ describe('PanelRepeaterGridItem', () => {
       '_____default_sys_repeat_var_____'
     );
   });
+
+  it('Should return className when repeat variable is set', () => {
+    const { repeater } = buildPanelRepeaterScene({ variableQueryTime: 0 });
+
+    expect(repeater.getClassName()).toBe('panel-repeater-grid-item');
+  });
+
+  it('Should not className variable is not set', () => {
+    const gridItem = new DashboardGridItem({
+      body: new VizPanel({ pluginId: 'text' }),
+    });
+
+    expect(gridItem.getClassName()).toBe('');
+  });
 });
diff --git a/public/app/features/dashboard-scene/scene/DashboardGridItem.tsx b/public/app/features/dashboard-scene/scene/DashboardGridItem.tsx
index 60796e0c812..753a504de5c 100644
--- a/public/app/features/dashboard-scene/scene/DashboardGridItem.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardGridItem.tsx
@@ -170,7 +170,7 @@ export class DashboardGridItem extends SceneObjectBase<DashboardGridItemState> i
   }
 
   public getClassName() {
-    return 'panel-repeater-grid-item';
+    return this.state.variableName ? 'panel-repeater-grid-item' : '';
   }
 
   public isRepeated() {