Fix message overlapping buttons

Fixes #1673
codesandbox · Mar 31, 2019 · c89b469 · c89b469
1 parent 43cec9c
commit c89b469
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/packages/app/src/app/components/CodeEditor/elements.ts b/packages/app/src/app/components/CodeEditor/elements.ts
@@ -11,6 +11,9 @@ export const Icons = styled.div`
     props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
   padding: 0.5rem 1rem;
   z-index: 40;
+
+  font-size: 0.875rem;
+  margin-top: 35px;
 `;
 
 export const Icon = styled.div`

diff --git a/packages/app/src/app/components/CodeEditor/index.tsx b/packages/app/src/app/components/CodeEditor/index.tsx
@@ -187,7 +187,7 @@ export default class CodeEditor extends React.PureComponent<
       >
         {!isModuleSynced(module.shortid) &&
           module.title === 'index.html' && (
-            <Icons style={{ fontSize: '.875rem' }}>
+            <Icons>
               You may have to save this file and refresh the preview to see
               changes
             </Icons>
@@ -202,12 +202,7 @@ export default class CodeEditor extends React.PureComponent<
               </Tooltip>
             </Icons>
           ) : (
-            <Icons
-              style={{
-                fontSize: '.875rem',
-                marginTop: settings.experimentVSCode ? 35 : 0,
-              }}
-            >
+            <Icons>
               {config.partialSupportDisclaimer ? (
                 <Tooltip
                   placement="bottom"