fix(webapp): fix language selector alignment

edenia · Nov 14, 2023 · 1eb388e · 1eb388e
1 parent ee44d9d
commit 1eb388e
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 36 deletions.
diff --git a/webapp/src/components/Header/index.js b/webapp/src/components/Header/index.js
@@ -79,26 +79,28 @@ const LanguageMenu = () => {
         })}
         onClick={closeMenu}
       ></div>
-      <Card
-        className={clsx(classes.hideMenu, {
+      <div
+        className={clsx(classes.hiddenlanguageMenu, {
           [classes.languageMenu]: Boolean(anchorMenu),
         })}
       >
-        {languages.map(language => (
-          <Button
-            key={`language-menu-${language.value}`}
-            onClick={() => closeMenu(language.value)}
-            onFocus={toggleMenu}
-            onBlur={closeMenu}
-            component={LocaleLink}
-            to={location.pathname + location.search}
-            locale={language.value}
-            color='inherit'
-          >
-            {language.label}
-          </Button>
-        ))}
-      </Card>
+        <Card>
+          {languages.map(language => (
+            <Button
+              key={`language-menu-${language.value}`}
+              onClick={() => closeMenu(language.value)}
+              onFocus={toggleMenu}
+              onBlur={closeMenu}
+              component={LocaleLink}
+              to={location.pathname + location.search}
+              locale={language.value}
+              color="inherit"
+            >
+              {language.label}
+            </Button>
+          ))}
+        </Card>
+      </div>
     </>
   )
 }

diff --git a/webapp/src/components/Header/styles.js b/webapp/src/components/Header/styles.js
@@ -149,27 +149,34 @@ export default (theme) => ({
       color: theme.palette.primary.contrastText,
     },
   },
-  hideMenu: {
-    maxHeight: 0,
-    margin: 0,
-    zIndex: 2,
-    width: 50,
-    position: 'absolute',
-    padding: '0 !important',
-    transition: 'none !important',
-    overflow: 'hidden !important',
-    boxShadow: 'none !important',
+  hiddenlanguageMenu: {
+    width: 0,
+    height: 0,
+    '& > div': {
+      maxHeight: 0,
+      margin: 0,
+      zIndex: 2,
+      width: 0,
+      position: 'relative',
+      padding: '0 !important',
+      transition: 'none !important',
+      overflow: 'hidden !important',
+      boxShadow: 'none !important',
+    }
   },
   languageMenu: {
-    maxHeight: 1000,
-    maxWidth: 50,
-    opacity: 1,
-    boxShadow: `${theme.palette.shadows.card} !important`,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    top: 60,
-    left: 'calc(100% - 70px)'
+    '& > div': {
+      maxWidth: 50,
+      width: 50,
+      maxHeight: 1000,
+      opacity: 1,
+      top: 25,
+      left: 'calc(100% - 65px)',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      boxShadow: `${theme.palette.shadows.card} !important`
+    }
   },
   hideElement: {
     height: 0,