DOP-5027: Chatbot menu dropdown width (#1256)

mongodb · Sep 26, 2024 · 7ebcee5 · 7ebcee5
1 parent 51401ba
commit 7ebcee5
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/ActionBar/SearchInput.js b/src/components/ActionBar/SearchInput.js
@@ -15,7 +15,7 @@ import debounce from '../../utils/debounce';
 import { isBrowser } from '../../utils/is-browser';
 import { SuspenseHelper } from '../SuspenseHelper';
 import { getCurrLocale } from '../../utils/locale';
-import { searchIconStyling, searchInputStyling, StyledInputContainer } from './styles';
+import { searchIconStyling, searchInputStyling, StyledInputContainer, StyledSearchBoxRef } from './styles';
 import { ShortcutIcon, SparkleIcon } from './SparkIcon';
 const Chatbot = lazy(() => import('mongodb-chatbot-ui'));
 const SearchMenu = lazy(() => import('./SearchMenu'));
@@ -208,26 +208,27 @@ const SearchInput = ({ className, slug }) => {
     <StyledInputContainer
       className={cx(className)}
       mobileSearchActive={mobileSearchActive}
-      ref={searchBoxRef}
       onKeyDown={handleSearchBoxKeyDown}
     >
-      <LGSearchInput
-        aria-label="Search MongoDB Docs"
-        className={searchInputStyling({ mobileSearchActive })}
-        value={searchValue}
-        placeholder={isMobile ? PLACEHOLDER_TEXT_MOBILE : PLACEHOLDER_TEXT}
-        onChange={(e) => {
-          setSearchValue(e.target.value);
-        }}
-        onClick={() => {
-          setIsOpen(!!searchValue.length);
-        }}
-        onSubmit={(e) => {
-          inputRef.current?.blur();
-          setIsOpen(false);
-        }}
-        ref={inputRef}
-      />
+      <StyledSearchBoxRef ref={searchBoxRef}>
+        <LGSearchInput
+          aria-label="Search MongoDB Docs"
+          className={searchInputStyling({ mobileSearchActive })}
+          value={searchValue}
+          placeholder={isMobile ? PLACEHOLDER_TEXT_MOBILE : PLACEHOLDER_TEXT}
+          onChange={(e) => {
+            setSearchValue(e.target.value);
+          }}
+          onClick={() => {
+            setIsOpen(!!searchValue.length);
+          }}
+          onSubmit={(e) => {
+            inputRef.current?.blur();
+            setIsOpen(false);
+          }}
+          ref={inputRef}
+        />
+      </StyledSearchBoxRef>
       {isMedium && mobileSearchActive && (
         <Link
           className={cx(

diff --git a/src/components/ActionBar/styles.js b/src/components/ActionBar/styles.js
@@ -156,7 +156,6 @@ export const StyledInputContainer = styled.div`
 
   @media ${theme.screenSize.mediumAndUp} {
     width: ${({ sidenav }) => (sidenav ? '70' : '100')}%;
-    padding-right: ${theme.size.medium};
   }
 
   ${(props) => {
@@ -169,8 +168,9 @@ export const StyledInputContainer = styled.div`
       z-index: 40;
       max-width: unset;
       left: ${theme.size.medium};
+      column-gap: ${theme.size.medium};
 
-      > form {
+      form {
         width: 100%;
         margin-right: ${theme.size.medium};
       }
@@ -179,6 +179,11 @@ export const StyledInputContainer = styled.div`
   }}
 `;
 
+// Used to ensure dropdown is same width as input
+export const StyledSearchBoxRef = styled.div`
+  width: 100%;
+`;
+
 export const searchInputStyling = ({ mobileSearchActive }) => css`
   ${displayNone.onMedium};
 
@@ -207,7 +212,7 @@ export const ActionsBox = styled('div')`
   column-gap: ${theme.size.default};
   position: relative;
   top: 0;
-  padding-right: ${theme.size.large};
+  padding: 0 ${theme.size.large} 0 ${theme.size.medium};
   justify-self: flex-end;
   grid-column: -2/-1;
 

diff --git a/tests/unit/__snapshots__/Presentation.test.js.snap b/tests/unit/__snapshots__/Presentation.test.js.snap
@@ -267,7 +267,7 @@ exports[`DocumentBody renders the necessary elements 1`] = `
   margin: 0;
   min-width: 0;
   display: none;
-  font-family: Akzidenz-Grotesk Std;
+  font-family: akzidenz-grotesk-std,Noto Sans KR,Noto Sans SC,Noto Sans JP;
   font-weight: 300;
   font-size: 12px;
   color: #b8c4c2;
@@ -296,7 +296,7 @@ exports[`DocumentBody renders the necessary elements 1`] = `
 }
 
 .emotion-23 {
-  font-family: Akzidenz-Grotesk Std;
+  font-family: akzidenz-grotesk-std,Noto Sans KR,Noto Sans SC,Noto Sans JP;
   font-weight: 500;
   font-size: 16px;
   margin-bottom: 24px;
@@ -332,7 +332,7 @@ exports[`DocumentBody renders the necessary elements 1`] = `
   color: #ffffff;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-family: Akzidenz-Grotesk Std;
+  font-family: akzidenz-grotesk-std,Noto Sans KR,Noto Sans SC,Noto Sans JP;
   font-weight: 300;
   font-size: 14px;
   line-height: 32px;
@@ -351,7 +351,7 @@ exports[`DocumentBody renders the necessary elements 1`] = `
   margin: 0;
   min-width: 0;
   display: block;
-  font-family: Akzidenz-Grotesk Std;
+  font-family: akzidenz-grotesk-std,Noto Sans KR,Noto Sans SC,Noto Sans JP;
   font-weight: 300;
   font-size: 12px;
   color: #b8c4c2;