TabsLayout: Fixes issue with fill screen rows or auto grids (#104669)

public/app/features/dashboard-scene/scene/layout-tabs/TabItemRenderer.tsx

@@ -4,7 +4,7 @@ import { useLocation } from 'react-router';
 
 import { locationUtil, textUtil } from '@grafana/data';
 import { SceneComponentProps, sceneGraph } from '@grafana/scenes';
-import { Tab, useElementSelection, usePointerDistance, useStyles2 } from '@grafana/ui';
+import { Box, Icon, Tab, Tooltip, useElementSelection, usePointerDistance, useStyles2 } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 
 import { useIsConditionallyHidden } from '../../conditional-rendering/useIsConditionallyHidden';
@@ -66,6 +66,7 @@ export function TabItemRenderer({ model }: SceneComponentProps<TabItem>) {
             )}
             active={isActive}
             title={titleInterpolated}
+            suffix={isConditionallyHidden ? IsHiddenSuffix : undefined}
             href={href}
             aria-selected={isActive}
             onPointerDown={(evt) => {
@@ -91,6 +92,21 @@ export function TabItemRenderer({ model }: SceneComponentProps<TabItem>) {
   );
 }
 
+function IsHiddenSuffix() {
+  return (
+    <Box paddingLeft={1} display={'inline'}>
+      <Tooltip
+        content={t(
+          'dashboard.conditional-rendering.overlay.tooltip',
+          'Element is hidden due to conditional rendering.'
+        )}
+      >
+        <Icon name="eye-slash" />
+      </Tooltip>
+    </Box>
+  );
+}
+
 const getStyles = () => ({
   dragging: css({
     cursor: 'move',

public/app/features/dashboard-scene/scene/layout-tabs/TabsLayoutManagerRenderer.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import { DragDropContext, Droppable } from '@hello-pangea/dnd';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -68,12 +68,10 @@ export function TabsLayoutManagerRenderer({ model }: SceneComponentProps<TabsLay
       </TabsBar>
 
       {isEditing && (
-        <div className={conditionalRenderingClass}>
-          <TabContent className={styles.tabContentContainer}>
-            {currentTab && <layout.Component model={layout} />}
-          </TabContent>
+        <TabContent className={cx(styles.tabContentContainer, conditionalRenderingClass)}>
+          {currentTab && <layout.Component model={layout} />}
           {conditionalRenderingOverlay}
-        </div>
+        </TabContent>
       )}
 
       {!isEditing && (
@@ -115,6 +113,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   }),
   tabContentContainer: css({
     backgroundColor: 'transparent',
+    position: 'relative',
     display: 'flex',
     flexDirection: 'column',
     flex: 1,