fix(client): stop margin from pushing outline out of the container (#49647)

* feat(client): stop margin from pushing outline out of the container

* remove the parent because it was breaking the layout on mobile devices

* sort the mobile and laptop layout

* remove extra property

* Update client/src/components/Header/components/universal-nav.css

* center the logo and fix the extra pixel issue

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>

* increase padding top

---------

Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>

client/src/components/Header/components/universal-nav.css

@@ -24,15 +24,12 @@
   z-index: 2000;
 }
 
-.universal-nav-middle {
+#universal-nav-logo {
   display: flex;
   align-items: center;
-  flex: 1 0 33%;
-  overflow-x: auto;
-  overflow-y: hidden;
+  overflow: hidden;
+  max-inline-size: max-content;
   -webkit-overflow-scrolling: touch;
-  letter-spacing: 0.4px;
-  white-space: nowrap;
   -ms-overflow-scrolling: touch;
 }
 
@@ -45,31 +42,13 @@
   height: var(--header-height);
 }
 
-#universal-nav-logo {
-  flex-shrink: 0;
-  display: block;
-  margin: 0 auto;
-  color: var(--gray-00);
-  font-size: 1.7rem;
-  line-height: 1em;
-  font-weight: bold;
-  letter-spacing: -0.5px;
-}
-
-#universal-nav-logo:hover {
-  text-decoration: none;
-  background-color: var(--theme-color);
-}
-
+#universal-nav-logo:hover,
 #universal-nav-logo:focus {
   background-color: inherit;
 }
 
 #universal-nav-logo svg {
-  display: block;
-  width: auto;
-  height: 24px;
-  margin: 7px 0;
+  margin: 4px;
 }
 
 .nav-list {
@@ -505,11 +484,14 @@ button.nav-link[aria-disabled='true'] {
   display: none;
 }
 
-@media (max-width: 980px) {
-  .universal-nav-middle {
-    flex: none;
+@media (min-width: 980px) {
+  #universal-nav-logo {
+    height: 100%;
+    margin-inline: 1em;
   }
+}
 
+@media (max-width: 980px) {
   .display-search {
     display: initial;
   }
@@ -527,7 +509,7 @@ button.nav-link[aria-disabled='true'] {
   #universal-nav-logo {
     display: flex;
     position: absolute;
-    left: 17px;
+    padding-top: 0.2em;
     top: 0;
   }
 
@@ -574,11 +556,8 @@ button.nav-link[aria-disabled='true'] {
   .exposed-button-nav {
     padding: 2px 8px;
   }
-  #universal-nav-logo svg {
-    display: block;
-    width: auto;
-    height: 18px;
-    margin: 10px 0;
+  #universal-nav-logo {
+    padding-block: 0.2em 0.1em;
   }
 }
 
@@ -592,20 +571,4 @@ button.nav-link[aria-disabled='true'] {
   .nav-link-sign-in {
     display: flex;
   }
-  #universal-nav-logo {
-    left: 8px;
-  }
-}
-
-@media (max-width: 300px) {
-  #universal-nav-logo {
-    max-width: none;
-    left: -170px;
-  }
-  #universal-nav-logo svg {
-    display: block;
-    width: auto;
-    height: 24px;
-    margin: 7px 0;
-  }
 }

client/src/components/Header/components/universal-nav.tsx

@@ -68,11 +68,9 @@ export const UniversalNav = ({
       >
         <Media minWidth={SEARCH_EXPOSED_WIDTH + 1}>{search}</Media>
       </div>
-      <div className='universal-nav-middle'>
-        <Link id='universal-nav-logo' to='/learn'>
-          <NavLogo />
-        </Link>
-      </div>
+      <Link id='universal-nav-logo' to='/learn'>
+        <NavLogo />
+      </Link>
       <div className='universal-nav-right main-nav'>
         {pending ? (
           <div className='nav-skeleton'>

cypress/e2e/default/learn/common-components/navbar.ts

@@ -48,7 +48,7 @@ describe('Navbar Logged in', () => {
   it(
     'Should take user to learn page when clicked on ' + 'the freeCodeCamp logo',
     () => {
-      cy.get('.universal-nav-middle').within(() => {
+      cy.get('#universal-nav-logo').within(() => {
         cy.get('svg').click();
       });
       cy.url().should('include', '/learn');