From dd40da7328f65a3e8ea9cb5e1e24dbe000cceaa9 Mon Sep 17 00:00:00 2001
From: Jake Dexheimer <jakedex@gmail.com>
Date: Mon, 3 Jul 2017 20:51:08 -0700
Subject: [PATCH] Fix windowControls padding

---
 components/CodeImage.js    | 3 +--
 components/Meta.js         | 6 +++++-
 components/svg/Controls.js | 3 ++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/CodeImage.js b/components/CodeImage.js
index aafeb36..c5cbfbf 100644
--- a/components/CodeImage.js
+++ b/components/CodeImage.js
@@ -51,8 +51,7 @@ const DEFAULT_SETTINGS = {
     // create styles
     const containerStyle = {
       background: config.background,
-      padding: `${config.paddingVertical} ${config.paddingHorizontal}`,
-      paddingTop: `calc(${config.paddingVertical} - 19px)` // TODO fix hack: accomodates for space taken up by window controls
+      padding: `${config.paddingVertical} ${config.paddingHorizontal}`
     }
 
     // set content to spinner if loading, else editor
diff --git a/components/Meta.js b/components/Meta.js
index 3b9d53b..307e893 100644
--- a/components/Meta.js
+++ b/components/Meta.js
@@ -61,10 +61,14 @@ export default () => (
       .CodeMirror__container .CodeMirror {
         height: auto;
         min-width: 680px;
-        padding: 40px 18px 24px;
+        padding: 24px 18px;
         border-radius: 5px;
       }
 
+      .window-controls + .CodeMirror__container > .CodeMirror {
+        padding-top: 40px;
+      }
+
       .cm-s-dracula .CodeMirror-cursor {
           border-left: solid 2px #159588;
       }
diff --git a/components/svg/Controls.js b/components/svg/Controls.js
index 5d0a08b..be5ba31 100644
--- a/components/svg/Controls.js
+++ b/components/svg/Controls.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 export default () => (
-  <div>
+  <div className="window-controls">
     <svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
       <g fill="none" fillRule="evenodd" transform="translate(1 1)">
         <circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" strokeWidth=".5"/>
@@ -11,6 +11,7 @@ export default () => (
     </svg>
     <style jsx>{`
       div {
+        margin-top: -19px;
         position: relative;
         top: +30px;
         margin-left: 18px;