fix: container header size

Author: waltergalvao

apps/web/src/app/metrics-and-insights/code-review-efficiency/page.tsx

@@ -33,6 +33,7 @@ import { ChartSizeCommentCorrelation } from "./components/chart-size-comment-cor
 import { TableTeamOverview } from "./components/table-team-overview";
 import { TableReviewDistribution } from "./components/table-review-distribution";
 import { useCodeReviewEfficiencyPage } from "./useCodeReviewEfficiencyPage";
+import { useLargerPageContainer } from "../../../providers/page.provider";
 
 export const CodeReviewEfficiencyPage = () => {
   const {
@@ -46,9 +47,10 @@ export const CodeReviewEfficiencyPage = () => {
     reviewers,
     handleColumnClick,
   } = useCodeReviewEfficiencyPage();
+  useLargerPageContainer("lg");
 
   return (
-    <PageContainer size="lg">
+    <PageContainer>
       <Breadcrumbs items={[{ label: "Metrics & Insights" }]} />
 
       <Group gap={5}>

apps/web/src/app/metrics-and-insights/pr-flow/page.tsx

@@ -28,6 +28,7 @@ import { ChartSizeCycleCorrelation } from "./components/chart-size-cycle-correla
 import { ChartThroughput } from "./components/chart-throughput";
 import { TableTeamOverview } from "./components/table-team-overview";
 import { usePrFlowPage } from "./usePrFlowPage";
+import { useLargerPageContainer } from "../../../providers/page.provider";
 
 export const PrFlowPage = () => {
   const {
@@ -39,8 +40,10 @@ export const PrFlowPage = () => {
     handleThroughputClick,
   } = usePrFlowPage();
 
+  useLargerPageContainer("lg");
+
   return (
-    <PageContainer size="lg">
+    <PageContainer>
       <Breadcrumbs items={[{ label: "Metrics & Insights" }]} />
 
       <Group gap={5}>

apps/web/src/app/page.tsx

@@ -24,15 +24,16 @@ export const AppPage = ({ children }: AppProps) => {
   if (shouldShowPaywall && !isSandbox) {
     showPaywallNotification();
     goToPaywall();
-
-    return <></>;
   }
 
   return (
     <>
       {isSandbox && <SandboxBanner />}
       {workspace && <AppSpotlight workspaceId={workspace.id} />}
-      <AppShell key={workspace?.id} topOffset={isSandbox ? SANDBOX_BANNER_HEIGHT : 0}>
+      <AppShell
+        key={workspace?.id}
+        topOffset={isSandbox ? SANDBOX_BANNER_HEIGHT : 0}
+      >
         {children ? children : <Outlet />}
       </AppShell>
     </>

apps/web/src/components/app-shell/header.tsx

@@ -5,7 +5,7 @@ import {
   useMantineTheme,
   Burger,
 } from "@mantine/core";
-import { usePageStore } from "../../providers/page.provider";
+import { containerSizes, usePageStore } from "../../providers/page.provider";
 
 interface HeaderProps {
   onToggleMenu: () => void;
@@ -19,7 +19,7 @@ export const Header = ({
   isMobile,
 }: HeaderProps): React.ReactElement => {
   const theme = useMantineTheme();
-  const { fullWidth } = usePageStore();
+  const { fullWidth, containerSize } = usePageStore();
 
   return (
     <AppShell.Header px={0} bg={theme.colors.dark[8]}>
@@ -44,6 +44,7 @@ export const Header = ({
           fluid={fullWidth}
           w={isMobile ? undefined : "100%"}
           m={isMobile ? 0 : undefined}
+          maw={isMobile ? undefined : containerSizes[containerSize]}
         >
           <Group
             justify="space-between"

apps/web/src/components/page-container/page-container.tsx

@@ -1,36 +1,30 @@
 import { Container } from "@mantine/core";
 import type { ReactNode } from "react";
-import { usePageStore } from "../../providers/page.provider";
+import { containerSizes, usePageStore } from "../../providers/page.provider";
 import { useScreenSize } from "../../providers/screen.provider";
+
 interface PageContainerProps {
   children?: ReactNode;
   pt?: number;
   pb?: number;
-  size?: "md" | "lg" | "xl";
 }
 
-const containerSizes = {
-  md: undefined,
-  lg: 1200,
-  xl: 1600,
-};
-
 export const PageContainer = ({
   children,
   pt = 40,
   pb = 40,
-  size = "md",
 }: PageContainerProps) => {
   const { fullWidth } = usePageStore();
   const { isSmallScreen } = useScreenSize();
+  const { containerSize } = usePageStore();
 
   return (
     <Container
       fluid={fullWidth}
       pt={pt}
       pb={pb}
       px={fullWidth && !isSmallScreen ? "xl" : undefined}
-      maw={containerSizes[size]}
+      maw={containerSizes[containerSize]}
     >
       {children}
     </Container>

apps/web/src/providers/page.provider.ts

@@ -4,14 +4,27 @@ import { useEffect } from "react";
 
 interface PageStore {
   fullWidth: boolean;
+  containerSize: ContainerSize;
   setFullWidth: (value: boolean) => void;
+  setContainerSize: (value: ContainerSize) => void;
 }
 
+export const containerSizes = {
+  md: undefined,
+  lg: 1200,
+  xl: 1600,
+};
+
+export type ContainerSize = keyof typeof containerSizes;
+
 export const usePageStore = create<PageStore>()(
   devtools(
     (set) => ({
+      containerSize: "md" as ContainerSize,
       fullWidth: false,
       setFullWidth: (value: boolean) => set(() => ({ fullWidth: value })),
+      setContainerSize: (value: ContainerSize) =>
+        set((state) => ({ ...state, containerSize: value })),
     }),
     { name: "page-store" },
   ),
@@ -28,3 +41,15 @@ export const useFullWidthPage = () => {
     };
   }, [setFullWidth]);
 };
+
+export const useLargerPageContainer = (size: ContainerSize) => {
+  const { setContainerSize } = usePageStore();
+
+  useEffect(() => {
+    setContainerSize(size);
+
+    return () => {
+      setContainerSize("md");
+    };
+  }, [size, setContainerSize]);
+};