Update search to use rem units where possible (#22970)

* Update search to use rem units where possible

* Use more primer classes

* Move more search to primer classes

Author: heiskr

components/Search.module.scss

@@ -1,71 +1,47 @@
+/* TODO remove mark styling if https://github.com/primer/css/pull/1756 ships */
 .resultsContainer mark {
   background: none;
   color: inherit;
 }
 
-.searchResultContent {
-  max-height: 4rem;
-}
-
 .searchResultContent mark {
   color: var(--color-fg-default);
   background-color: var(--color-attention-subtle);
 }
+/* end TODO */
 
-.searchResultTitle em {
-  font-style: normal;
-  text-decoration: underline;
+.searchResultContent {
+  max-height: 4rem;
 }
 
 .resultsContainerHeader {
-  display: none;
-  position: absolute;
-  top: 0;
-  right: 0;
   width: 0;
-  border-radius: 0 0 0 3px;
-  background: var(--color-canvas-default);
-  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.15);
+  border-radius: 0 0 0 4px; // primer rounded-1
   transition: width 0.3s ease-in-out;
-  padding-top: 64px;
-}
-
-.resultsContainerOpen {
-  display: block;
 }
 
 .resultsContainerOpen.resultsContainerHeader {
   width: 60vw;
-  max-width: 760px;
+  max-width: 48rem;
 }
 
 .searchInput {
   transition: width 0.3s ease-in-out;
 }
 
 .searchInputHeader {
-  max-width: 690px;
-  width: 256px;
-}
-
-.searchInputExpanded {
-  width: 53vw;
-  position: absolute;
-  right: 0;
-  top: 0;
+  width: 16rem;
 }
 
 .headerSearchOpen {
   background: var(--color-primer-canvas-backdrop);
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: block;
+}
+
+.searchInputExpanded {
+  width: 54vw;
+  max-width: 43rem;
 }
 
 .headerSearchResults {
-  overflow-y: auto;
   max-height: 80vh;
 }

components/Search.tsx

@@ -170,9 +170,11 @@ export function Search({
         id="search-results-container"
         className={cx(
           'z-1 pb-5 px-3',
-          isHeaderSearch && 'pt-9',
+          isHeaderSearch &&
+            'pt-9 color-bg-default color-shadow-medium position-absolute top-0 right-0',
           styles.resultsContainer,
           isHeaderSearch && styles.resultsContainerHeader,
+          query ? 'd-block' : 'd-none',
           query && styles.resultsContainerOpen
         )}
       >
@@ -189,7 +191,13 @@ export function Search({
       </div>
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
       <div
-        className={cx('-z-1', isHeaderSearch && query ? styles.headerSearchOpen : 'd-none')}
+        className={cx(
+          '-z-1',
+          isHeaderSearch && query
+            ? 'position-fixed top-0 right-0 bottom-0 left-0 d-block'
+            : 'd-none',
+          isHeaderSearch && query && styles.headerSearchOpen
+        )}
         onClick={closeSearch}
       />
     </>
@@ -210,7 +218,8 @@ export function Search({
               variant === 'expanded' && 'py-3',
               isHeaderSearch && styles.searchInputHeader,
               !isHeaderSearch && 'width-full',
-              isHeaderSearch && query && styles.searchInputExpanded
+              isHeaderSearch && query && styles.searchInputExpanded,
+              isHeaderSearch && query && 'position-absolute top-0 right-0'
             )}
             style={{
               background: `var(--color-canvas-default) url("/assets/images/octicons/search-${iconSize}.svg") no-repeat ${
@@ -325,7 +334,11 @@ function ShowSearchResults({
     const ActionListResults = (
       <div
         data-testid="search-results"
-        className={cx('mt-3', isHeaderSearch && styles.headerSearchResults)}
+        className={cx(
+          'mt-3',
+          isHeaderSearch && styles.headerSearchResults,
+          isHeaderSearch && 'overflow-auto'
+        )}
       >
         <div className="my-4">
           <p className="mx-4">
@@ -372,7 +385,7 @@ function ShowSearchResults({
                           </small>
                         )}
                         <div
-                          className={cx(styles.searchResultTitle, 'mt-2 d-block f4 text-semibold')}
+                          className={cx('mt-2 d-block f4 text-semibold')}
                           dangerouslySetInnerHTML={{
                             __html: title,
                           }}

pages/index.tsx

@@ -91,23 +91,23 @@ function LandingPage(props: LandingPageProps) {
   return (
     <div>
       {/* <!-- Hero --> */}
-      <section id="landing" className="color-bg-subtle">
+      <section id="landing" className="color-bg-subtle p-6">
         {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
         <Search iconSize={24} variant="expanded">
           {({ SearchInput, SearchResults }) => {
             return (
-              <div className="container-xl px-3 px-md-6 pb-6 pb-lg-0">
-                <div className="gutter gutter-xl-spacious pt-6 pt-lg-0 d-lg-flex flex-row-reverse flex-items-center">
+              <div className="container-xl">
+                <div className="gutter gutter-xl-spacious d-lg-flex flex-row-reverse flex-items-center">
                   <div className="col-lg-7">
                     <OctocatHeader />
                   </div>
-                  <div className="col-lg-5 mt-6">
-                    <h1 className="text-semibold mb-3">{t('search:need_help')}</h1>
+                  <div className="col-lg-5">
+                    <h1 className="text-semibold">{t('search:need_help')}</h1>
                     {SearchInput}
                   </div>
                 </div>
 
-                <div className="mt-3">{SearchResults}</div>
+                <div>{SearchResults}</div>
               </div>
             )
           }}