fix: fix issues with alignment of page headers

leather-io · Aug 22, 2024 · 7e5cbb4 · 7e5cbb4
1 parent 427f82f
commit 7e5cbb4
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 8 deletions.
diff --git a/src/app/components/layout/headers/header-grid.tsx b/src/app/components/layout/headers/header-grid.tsx
@@ -15,7 +15,7 @@ export function HeaderGrid({ leftCol, centerCol, rightCol, ...props }: HeaderGri
   return (
     <Grid
       alignItems="center"
-      gridTemplateColumns={centerCol ? '2fr 4fr 2fr' : 'auto 4fr auto'}
+      gridTemplateColumns={centerCol ? '2fr 4fr 2fr' : 'auto auto'}
       gridAutoFlow="column"
       width="100%"
       {...props}

diff --git a/src/app/components/layout/layouts/content.layout.tsx b/src/app/components/layout/layouts/content.layout.tsx
@@ -4,7 +4,13 @@ import type { HasChildren } from '@app/common/has-children';
 
 export function Content({ children }: HasChildren) {
   return (
-    <Flex className="main-content" flexGrow={1} position="relative" width="100%">
+    <Flex
+      className="main-content"
+      flexGrow={1}
+      position="relative"
+      width="100%"
+      maxWidth="fullPageMaxWidth"
+    >
       {children}
     </Flex>
   );

diff --git a/src/app/components/layout/layouts/two-column.layout.tsx b/src/app/components/layout/layouts/two-column.layout.tsx
@@ -25,7 +25,6 @@ export function TwoColumnLayout({
       mx={{ base: 'auto', md: 'space.03', lg: 'space.06' }}
       gap="space.05"
       width={{ base: '100vw', md: 'unset' }}
-      maxWidth="fullPageMaxWidth"
     >
       <Flex flexDirection="column" gap="space.04">
         <Stack gap="space.04">

diff --git a/src/app/features/container/headers/home.header.tsx b/src/app/features/container/headers/home.header.tsx
@@ -16,7 +16,7 @@ export function HomeHeader() {
     useOutletContext<SwitchAccountOutletContext>();
 
   return (
-    <Header paddingLeft={{ base: undefined, sm: 0 }}>
+    <Header>
       <HeaderGrid
         leftCol={<LogoBox hideBelow={undefined} />}
         rightCol={

diff --git a/src/app/features/container/headers/page.header.tsx b/src/app/features/container/headers/page.header.tsx
@@ -39,7 +39,7 @@ export function PageHeader({
 
   return (
     <>
-      <Header>
+      <Header paddingLeft={{ base: undefined, sm: 0 }}>
         <HeaderGrid
           leftCol={
             <>

diff --git a/src/app/features/container/headers/unlock.header.tsx b/src/app/features/container/headers/unlock.header.tsx
@@ -15,7 +15,7 @@ export function UnlockHeader() {
   const navigate = useNavigate();
 
   return (
-    <Header paddingLeft={{ base: undefined, sm: 0 }}>
+    <Header>
       <HeaderGrid
         leftCol={
           <LogoBox onClick={() => navigate(RouteUrls.Home)} hideBelow={undefined} hideFrom="sm" />

diff --git a/src/app/pages/fund/components/fund.layout.tsx b/src/app/pages/fund/components/fund.layout.tsx
@@ -14,7 +14,6 @@ export function FundLayout({ blockchain, symbol, children }: FundLayoutProps) {
       alignItems={{ base: 'left', md: 'center' }}
       p={{ base: 'space.05', md: 'unset' }}
       gap={{ base: 'space.04', md: 'space.05' }}
-      maxWidth="fullPageMaxWidth"
     >
       <styled.h1
         textAlign={{ base: 'left', md: 'center' }}

diff --git a/src/app/pages/home/home.tsx b/src/app/pages/home/home.tsx
@@ -49,7 +49,6 @@ export function Home() {
   return (
     <Stack
       data-testid={HomePageSelectors.HomePageContainer}
-      maxWidth={{ base: 'unset', md: 'fullPageMaxWidth' }}
       px={{ base: 0, md: 'space.05' }}
       py={{ base: 0, md: 'space.07' }}
       gap={{ base: 0, md: 'space.06' }}