DashboardScene: Fixes issue with mobile responsive layout due to repeated grid item class (#85731)

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

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() {