From 5ecb19c6b67bc7bb6f0a758bad66092253830396 Mon Sep 17 00:00:00 2001
From: Jake Dexheimer <jakedex@gmail.com>
Date: Thu, 30 Nov 2017 22:46:06 -0800
Subject: [PATCH] Fix export alpha padding issue

---
 components/Carbon.js | 15 +++++++++------
 pages/editor.js      |  2 +-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/components/Carbon.js b/components/Carbon.js
index 5ba9685..ac6f23b 100644
--- a/components/Carbon.js
+++ b/components/Carbon.js
@@ -219,19 +219,22 @@ class Carbon extends React.Component {
 
     return (
       <div id="section">
-        {content}
+        <div id="export-container">
+          {content}
+          <div id="twitter-png-fix" />
+        </div>
         <style jsx>{`
-          #section {
+          #section,
+          #export-container {
             height: 100%;
             display: flex;
+            flex-direction: column;
             justify-content: center;
             align-items: center;
           }
 
-          #section::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
+          /* forces twitter to save images as png — https://github.com/dawnlabs/carbon/issues/86 */
+          #twitter-png-fix {
             height: 1px;
             width: 100%;
             background: rgba(0, 0, 0, 0.01);
diff --git a/pages/editor.js b/pages/editor.js
index 74bb5d3..9838411 100644
--- a/pages/editor.js
+++ b/pages/editor.js
@@ -95,7 +95,7 @@ class Editor extends React.Component {
   }
 
   getCarbonImage() {
-    const node = document.getElementById('section')
+    const node = document.getElementById('export-container')
 
     const config = {
       style: {