From 2a48f4f69a9cf472cbb6793ff45e07b794ea0f51 Mon Sep 17 00:00:00 2001
From: Jesse Devaney <22608765+JesseSDevaney@users.noreply.github.com>
Date: Fri, 16 Feb 2024 17:12:39 -0500
Subject: [PATCH] fix dashboard header fixed width adjustment bug (#38880)
---
.../components/DashboardHeader/DashboardHeaderView.tsx | 5 ++++-
.../dashboard/components/DashboardHeaderView.styled.tsx | 6 +++++-
.../DashboardInfoSidebar/DashboardInfoSidebar.styled.tsx | 1 +
3 files changed, 10 insertions(+), 2 deletions(-)
diff --git a/frontend/src/metabase/dashboard/components/DashboardHeader/DashboardHeaderView.tsx b/frontend/src/metabase/dashboard/components/DashboardHeader/DashboardHeaderView.tsx
index 81b81fe986f..2b784833bd2 100644
--- a/frontend/src/metabase/dashboard/components/DashboardHeader/DashboardHeaderView.tsx
+++ b/frontend/src/metabase/dashboard/components/DashboardHeader/DashboardHeaderView.tsx
@@ -117,7 +117,10 @@ export function DashboardHeaderComponent({
<span>{editWarning}</span>
</EditWarning>
)}
- <HeaderContainer isSidebarOpen={isSidebarOpen}>
+ <HeaderContainer
+ isFixedWidth={dashboard?.width === "fixed"}
+ isSidebarOpen={isSidebarOpen}
+ >
<HeaderRow
className={cx("QueryBuilder-section", headerClassName)}
data-testid="dashboard-header"
diff --git a/frontend/src/metabase/dashboard/components/DashboardHeaderView.styled.tsx b/frontend/src/metabase/dashboard/components/DashboardHeaderView.styled.tsx
index 1f225e13051..d42e46598a9 100644
--- a/frontend/src/metabase/dashboard/components/DashboardHeaderView.styled.tsx
+++ b/frontend/src/metabase/dashboard/components/DashboardHeaderView.styled.tsx
@@ -40,8 +40,12 @@ export const HeaderFixedWidthContainer = styled(
}
`;
-export const HeaderContainer = styled.div<{ isSidebarOpen: boolean }>`
+export const HeaderContainer = styled.div<{
+ isSidebarOpen: boolean;
+ isFixedWidth: boolean;
+}>`
${props =>
+ props.isFixedWidth &&
props.isSidebarOpen &&
css`
margin-right: ${SIDEBAR_WIDTH}px;
diff --git a/frontend/src/metabase/dashboard/components/DashboardInfoSidebar/DashboardInfoSidebar.styled.tsx b/frontend/src/metabase/dashboard/components/DashboardInfoSidebar/DashboardInfoSidebar.styled.tsx
index 279e2b273f1..96be5696fe9 100644
--- a/frontend/src/metabase/dashboard/components/DashboardInfoSidebar/DashboardInfoSidebar.styled.tsx
+++ b/frontend/src/metabase/dashboard/components/DashboardInfoSidebar/DashboardInfoSidebar.styled.tsx
@@ -8,6 +8,7 @@ import FormField from "metabase/core/components/FormField/FormField";
import { SIDEBAR_WIDTH } from "../Sidebar";
export const DashboardInfoSidebarRoot = styled.aside`
+ width: ${SIDEBAR_WIDTH}px;
min-width: ${SIDEBAR_WIDTH}px;
padding: 0 2rem 0.5rem;
background: ${color("white")};
--
GitLab