Fix some safari style issues

schiehll · May 31, 2019 · 7aacc31 · 7aacc31
1 parent 72d44dd
commit 7aacc31
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 2 deletions.
diff --git a/src/components/link-list-item/styles.js b/src/components/link-list-item/styles.js
@@ -6,6 +6,10 @@ export const Link = styled.a`
   color: currentColor;
   cursor: pointer;
 
+  ${ExternalLinkIcon} {
+    transition: all 0.3s ease;
+  }
+
   &:hover {
     ${ExternalLinkIcon} {
       transform: scale(1.2);

diff --git a/src/components/link/index.js b/src/components/link/index.js
@@ -10,7 +10,7 @@ const Link = ({ children, to, ...props }) => {
   return (
     <S.Link href={SVGData?.url || '#'} target="_blank" {...props}>
       {SVGData?.src && <S.Logo src={SVGData.src} alt={SVGData.name} />}
-      {children}
+      <span>{children}</span>
       <S.ExternalLinkIcon />
     </S.Link>
   )

diff --git a/src/components/link/styles.js b/src/components/link/styles.js
@@ -4,7 +4,6 @@ import { FiExternalLink } from 'react-icons/fi'
 export const ExternalLinkIcon = styled(FiExternalLink)`
   ${({ theme: { spacing } }) => css`
     margin-left: ${spacing.base}px;
-    transition: all 0.3 ease;
   `}
 `
 
@@ -27,10 +26,19 @@ export const Link = styled.a`
     display: inline-flex;
     align-items: center;
 
+    ${ExternalLinkIcon} {
+      transition: all 0.3s ease;
+    }
+
     &:hover {
       ${ExternalLinkIcon} {
         transform: scale(1.2);
       }
     }
+
+    > span {
+      flex: 1;
+      min-width: fit-content;
+    }
   `}
 `
diff --git a/src/components/shell/code/styles.js b/src/components/shell/code/styles.js
@@ -28,5 +28,6 @@ export const Pre = styled.pre`
     padding: ${spacing.base}px;
     background-color: ${colors.gray[10]};
     overflow-x: auto;
+    overflow-y: visible;
   `}
 `
diff --git a/src/components/shell/search/styles.js b/src/components/shell/search/styles.js
@@ -28,6 +28,9 @@ export const StyledInput = styled.input`
     border: none;
     border-radius: ${radius}px;
     font-size: ${font.sizes.default}px;
+    appearance: textfield;
+    display: flex;
+    align-items: center;
 
     &::placeholder {
       font-size: ${font.sizes.default}px;