fix(UI): adjust the behavior of the elements in navbar (#50852)

Co-authored-by: Muhammed Mustafa <MuhammedElruby@gmail.com>

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

@@ -33,6 +33,7 @@
   max-inline-size: max-content;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-scrolling: touch;
+  padding-top: 0.2em;
 }
 
 #universal-nav-logo:focus {
@@ -44,7 +45,7 @@
   justify-content: flex-end;
   align-items: center;
   gap: 10px;
-  flex: 1 0 33%;
+  flex: 1 0 auto;
   height: var(--header-height);
 }
 
@@ -271,7 +272,7 @@ li > button.nav-link-signout:not([aria-disabled='true']):is(:hover, :focus) {
 }
 
 .expand-nav {
-  height: var(--header-height);
+  min-height: calc(var(--header-height) * 2);
 }
 
 .display-menu {
@@ -357,8 +358,17 @@ li > button.nav-link-signout:not([aria-disabled='true']):is(:hover, :focus) {
 @media (min-width: 980px) {
   #universal-nav-logo {
     height: 100%;
+    padding-top: 0;
     margin-inline: 1em;
   }
+
+  .expand-nav {
+    min-height: var(--header-height);
+  }
+
+  .universal-nav-right {
+    flex: 1 0 33%;
+  }
 }
 
 @media (max-width: 980px) {
@@ -366,23 +376,9 @@ li > button.nav-link-signout:not([aria-disabled='true']):is(:hover, :focus) {
     display: initial;
   }
 
-  .universal-nav-right {
-    flex: 1 0 auto;
-    display: flex;
-    justify-content: flex-end;
-  }
-
   .fcc_searchBar .ais-SearchBox-form {
     max-width: calc(100vw - 350px);
   }
-
-  #universal-nav-logo {
-    padding-top: 0.2em;
-  }
-
-  .expand-nav {
-    min-height: calc(2 * var(--header-height));
-  }
 }
 
 @media (max-width: 600px) {
@@ -391,24 +387,18 @@ li > button.nav-link-signout:not([aria-disabled='true']):is(:hover, :focus) {
     margin-top: 0;
   }
 
-  .display-menu {
-    top: calc(var(--header-height) * 2);
-  }
-
   .fcc_searchBar,
   .fcc_searchBar div {
     width: 100%;
   }
 
-  .universal-nav-right .fcc_searchBar .ais-SearchBox-form {
-    width: calc(100% - 30px);
-  }
-
   .display-menu {
+    top: calc(var(--header-height) * 2);
     max-height: calc(100vh - var(--header-height) * 2);
   }
 
-  .universal-nav-right .fcc_searchBar .ais-Hits {
+  .universal-nav-right .fcc_searchBar .ais-Hits,
+  .universal-nav-right .fcc_searchBar .ais-SearchBox-form {
     width: calc(100% - 30px);
   }
   #universal-nav .signup-btn {

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

@@ -1,7 +1,7 @@
 import Loadable from '@loadable/component';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import Media from 'react-responsive';
+import Media, { useMediaQuery } from 'react-responsive';
 import { useFeature } from '@growthbook/growthbook-react';
 import { isLanding } from '../../../utils/path-parsers';
 import { Link, SkeletonSprite } from '../../helpers';
@@ -39,6 +39,9 @@ const UniversalNav = ({
 }: UniversalNavProps): JSX.Element => {
   const { pending } = fetchState;
   const { t } = useTranslation();
+  const isSearchExposedWidth = useMediaQuery({
+    query: `(min-width: ${SEARCH_EXPOSED_WIDTH}px)`
+  });
 
   const exposeDonateButton = useFeature('expose_donate_button').on;
 
@@ -55,7 +58,7 @@ const UniversalNav = ({
       className={`universal-nav${displayMenu ? ' expand-nav' : ''}`}
       id='universal-nav'
     >
-      <Media minWidth={SEARCH_EXPOSED_WIDTH + 1}>
+      {isSearchExposedWidth && (
         <div
           className={`universal-nav-left${
             displayMenu ? ' display-search' : ''
@@ -63,7 +66,7 @@ const UniversalNav = ({
         >
           {search}
         </div>
-      </Media>
+      )}
       <Link id='universal-nav-logo' to='/learn'>
         <NavLogo />
       </Link>
@@ -94,7 +97,7 @@ const UniversalNav = ({
               showMenu={showMenu}
               user={user}
             />
-            <Media maxWidth={SEARCH_EXPOSED_WIDTH}>{search}</Media>
+            {!isSearchExposedWidth && search}
             <NavLinks
               displayMenu={displayMenu}
               hideMenu={hideMenu}