fix: Adds left padding to dashboard edit mode when filter bar is clos…

…ed (apache#15024)
QAlexBall · Jun 8, 2021 · 7c8ba58 · 7c8ba58
1 parent 5fa6bb1
commit 7c8ba58
Showing 1 changed file with 13 additions and 7 deletions.
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -57,7 +57,10 @@ const HEADER_HEIGHT = 67;
 
 type DashboardBuilderProps = {};
 
-const StyledDashboardContent = styled.div<{ dashboardFiltersOpen: boolean }>`
+const StyledDashboardContent = styled.div<{
+  dashboardFiltersOpen: boolean;
+  editMode: boolean;
+}>`
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -75,13 +78,15 @@ const StyledDashboardContent = styled.div<{ dashboardFiltersOpen: boolean }>`
     width: 100%;
     flex-grow: 1;
     position: relative;
-    margin: ${({ theme }) => theme.gridUnit * 6}px
-      ${({ theme }) => theme.gridUnit * 8}px
-      ${({ theme }) => theme.gridUnit * 6}px
-      ${({ theme, dashboardFiltersOpen }) => {
-        if (dashboardFiltersOpen) return theme.gridUnit * 8;
+    margin-top: ${({ theme }) => theme.gridUnit * 6}px;
+    margin-right: ${({ theme }) => theme.gridUnit * 8}px;
+    margin-bottom: ${({ theme }) => theme.gridUnit * 6}px;
+    margin-left: ${({ theme, dashboardFiltersOpen, editMode }) => {
+      if (!dashboardFiltersOpen && !editMode) {
         return 0;
-      }}px;
+      }
+      return theme.gridUnit * 8;
+    }}px;
   }
 
   .dashboard-component-chart-holder {
@@ -204,6 +209,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
       <StyledDashboardContent
         className="dashboard-content"
         dashboardFiltersOpen={dashboardFiltersOpen}
+        editMode={editMode}
       >
         {nativeFiltersEnabled && !editMode && (
           <StickyVerticalBar