The header logo link spans the width of it's parent so that the hover…

… pseudo class is activated when the user hovers over the whole header logo component
nicholeuf · Feb 18, 2024 · ec91311 · ec91311
1 parent ab3781b
commit ec91311
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/src/app/__snapshots__/page.test.tsx.snap b/src/app/__snapshots__/page.test.tsx.snap
@@ -88,6 +88,8 @@ exports[`The Home Page has expected snapshot 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #373833;
+  width: 100%;
+  text-align: center;
 }
 
 .emotion-2:hover {

diff --git a/src/components/Header/HeaderLogo.tsx b/src/components/Header/HeaderLogo.tsx
@@ -36,6 +36,8 @@ const HeaderLogo: React.FC<HeaderLogoProps> = ({
         href="/"
         sx={{
           color,
+          width: '100%',
+          textAlign: 'center',
           '&:hover': {
             color: activeColor,
             textDecoration: 'none',