From 1410e528a4e9f82ec217ae9e28b4fff2165305c4 Mon Sep 17 00:00:00 2001
From: Sukuna <90980311+samarsrivastav@users.noreply.github.com>
Date: Fri, 15 Nov 2024 22:13:57 +0530
Subject: [PATCH] fix: blocks UI elements on right side (#30886)

Co-authored-by: Evan Rusackas <evan@preset.io>
(cherry picked from commit df479940a6afdff36826042a1923ed804cbfe337)
---
 .../components/gridComponents/ChartHolder.tsx | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.tsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.tsx
index 2f4a77c39b07d..d31e240e4f70d 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.tsx
@@ -21,7 +21,7 @@ import { useState, useMemo, useCallback, useEffect } from 'react';
 import { ResizeCallback, ResizeStartCallback } from 're-resizable';
 import cx from 'classnames';
 import { useSelector } from 'react-redux';
-import { css } from '@superset-ui/core';
+import { css, useTheme } from '@superset-ui/core';
 import { LayoutItem, RootState } from 'src/dashboard/types';
 import AnchorLink from 'src/dashboard/components/AnchorLink';
 import Chart from 'src/dashboard/containers/Chart';
@@ -70,15 +70,6 @@ interface ChartHolderProps {
   isInView: boolean;
 }
 
-const fullSizeStyle = css`
-  && {
-    position: fixed;
-    z-index: 3000;
-    left: 0;
-    top: 0;
-  }
-`;
-
 const ChartHolder: React.FC<ChartHolderProps> = ({
   id,
   parentId,
@@ -102,6 +93,16 @@ const ChartHolder: React.FC<ChartHolderProps> = ({
   setFullSizeChartId,
   isInView,
 }) => {
+  const theme = useTheme();
+  const fullSizeStyle = css`
+    && {
+      position: fixed;
+      z-index: 3000;
+      left: 0;
+      top: 0;
+      padding: ${theme.gridUnit * 2}px;
+    }
+  `;
   const { chartId } = component.meta;
   const isFullSize = fullSizeChartId === chartId;