TabsLayout: Add left margin to nested tab (#109052)

add margin if tabs layout is inside tab item

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

@@ -1,5 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { DragDropContext, Droppable } from '@hello-pangea/dnd';
+import { useMemo } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -27,6 +28,7 @@ export function TabsLayoutManagerRenderer({ model }: SceneComponentProps<TabsLay
   const { isEditing } = dashboard.useState();
   const { hasCopiedTab } = useClipboardState();
   const [_, conditionalRenderingClass, conditionalRenderingOverlay] = useIsConditionallyHidden(currentTab);
+  const isNestedInTab = useMemo(() => model.parent instanceof TabItem, [model.parent]);
   const soloPanelContext = useSoloPanelContext();
 
   if (soloPanelContext) {
@@ -36,7 +38,7 @@ export function TabsLayoutManagerRenderer({ model }: SceneComponentProps<TabsLay
   const isClone = isRepeatCloneOrChildOf(model);
 
   return (
-    <div className={styles.tabLayoutContainer}>
+    <div className={cx(styles.tabLayoutContainer, { [styles.nestedTabsMargin]: isNestedInTab })}>
       <TabsBar className={styles.tabsBar}>
         <DragDropContext
           onBeforeDragStart={(start) => model.forceSelectTab(start.draggableId)}
@@ -154,4 +156,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     minHeight: theme.spacing(1 + 0.125),
     paddingTop: theme.spacing(1),
   }),
+  nestedTabsMargin: css({
+    marginLeft: theme.spacing(2),
+  }),
 });