fix: Menu on safari (#53)

pancakeswap · Nov 12, 2020 · 5d5db86 · 5d5db86
1 parent 96bc548
commit 5d5db86
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 12 deletions.
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -6,6 +6,7 @@ interface Props {
 }
 
 const DropdownContent = styled.div`
+  width: max-content;
   display: none;
   flex-direction: column;
   position: absolute;
@@ -21,7 +22,6 @@ const DropdownContent = styled.div`
 `;
 
 const Container = styled.div`
-  width: fit-content;
   position: relative;
   &:hover ${DropdownContent}, &:focus-within ${DropdownContent} {
     display: flex;

diff --git a/src/widgets/Nav/Buttons.tsx b/src/widgets/Nav/Buttons.tsx
@@ -3,16 +3,6 @@ import styled from "styled-components";
 import { NavLink } from "react-router-dom";
 import Button from "../../components/Button";
 
-const MobileOnlyButton = styled(Button)`
-  ${({ theme }) => theme.mediaQueries.nav} {
-    display: none;
-  }
-`;
-MobileOnlyButton.defaultProps = {
-  variant: "text",
-  size: "sm",
-};
-
 const MenuButton = styled(Button)`
   padding: 0 8px;
   border-radius: 8px;
@@ -22,6 +12,12 @@ MenuButton.defaultProps = {
   size: "sm",
 };
 
+const MobileOnlyButton = styled(MenuButton)`
+  ${({ theme }) => theme.mediaQueries.nav} {
+    display: none;
+  }
+`;
+
 const MenuLink: React.FC<AnchorHTMLAttributes<HTMLAnchorElement>> = ({ href = "", children, ...props }) => {
   return href.startsWith("http") ? (
     <a key={href} className="link" href={href} {...props}>

diff --git a/src/widgets/Nav/Panel.tsx b/src/widgets/Nav/Panel.tsx
@@ -159,7 +159,7 @@ const Panel: React.FC<Props> = ({
               size="sm"
               onClick={() => setLang(lang)}
               // Safari specific fix
-              style={{ minHeight: "32px", width: "max-content" }}
+              style={{ minHeight: "32px", height: "auto" }}
             >
               {lang.language}
             </Button>