update mobile styling

mongodb · Nov 26, 2024 · ed8c2eb · ed8c2eb
1 parent 95249a4
commit ed8c2eb
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 17 deletions.
diff --git a/src/components/ActionBar/ActionBar.js b/src/components/ActionBar/ActionBar.js
@@ -31,8 +31,8 @@ import {
   getContainerStyling,
   offlineStyling,
   overlineStyling,
-  buttonStyling,
-  mobileButtonStyling,
+  chatbotButtonStyling,
+  chatbotMobileButtonStyling,
 } from './styles';
 import { SparkleIcon } from './SparkIcon';
 
@@ -86,15 +86,15 @@ const ActionBar = ({ template, slug, sidenav, ...props }) => {
         <ActionsBox>
           {template !== 'openapi' && <DarkModeDropdown />}
           <Button
-            className={cx(buttonStyling)}
+            className={cx(chatbotButtonStyling)}
             leftGlyph={<Icon glyph="Sparkle" />}
             aria-label={CHATBOT_TEXT}
             variant={'primaryOutline'}
             onClick={openChatbot}
           >
             {CHATBOT_TEXT}
           </Button>
-          <SparkleIcon className={cx(mobileButtonStyling)} glyph={'Sparkle'} onClick={openChatbot} />
+          <SparkleIcon className={cx(chatbotMobileButtonStyling)} glyph={'Sparkle'} onClick={openChatbot} />
           {locale === 'en-us' && (
             <SuspenseHelper>
               <Chatbot serverBaseUrl={CHATBOT_SERVER_BASE_URL} darkMode={darkMode}>

diff --git a/src/components/ActionBar/styles.js b/src/components/ActionBar/styles.js
@@ -240,7 +240,7 @@ export const ActionsBox = styled('div')`
   grid-column: -2/-1;
 
   @media ${theme.screenSize.upToLarge} {
-    column-gap: 1px;
+    column-gap: 6px;
     margin-right: ${theme.size.medium};
     margin-left: ${theme.size.small};
   }
@@ -275,12 +275,6 @@ export const searchIconStyling = css`
   ${displayNone.onLargerThanMedium};
   float: right;
   justify-content: right;
-
-  @media ${theme.screenSize.upToMedium} {
-    > div {
-      justify-content: flex-end;
-    }
-  }
 `;
 
 export const offlineStyling = css`
@@ -289,16 +283,20 @@ export const offlineStyling = css`
   }
 `;
 
-export const buttonStyling = css`
-  text-wrap-mode: nowrap;
-  ${displayNone.onMobileAndTablet};
-
+const hideOnEnLang = `
   &:not(:lang(EN)) {
     display: none;
   }
 `;
 
-export const mobileButtonStyling = css`
+export const chatbotButtonStyling = css`
+  text-wrap-mode: nowrap;
+  ${displayNone.onMobileAndTablet};
+  ${hideOnEnLang}
+`;
+
+export const chatbotMobileButtonStyling = css`
   cursor: pointer;
-  ${displayNone.onLargerThanTablet};
+  ${displayNone.onLargerThanTablet}
+  ${hideOnEnLang}
 `;