From f24bf1ed1a2acacf3c157bb36bd2a97134885a9e Mon Sep 17 00:00:00 2001
From: Brian Whitton <me@brianwhitton.com>
Date: Fri, 19 Jan 2018 18:01:41 -0500
Subject: [PATCH] increase size of embed when message appears

---
 src/App.css        | 2 +-
 src/SignupForm.css | 4 ++++
 src/SignupForm.js  | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/App.css b/src/App.css
index 98c5a54..d28521d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,7 +3,7 @@
   flex-direction: column;
   justify-content: center;
   text-align: center;
-  padding: 75px 25px;
+  padding: 30px 25px;
 }
 
 .not-embedded .App {
diff --git a/src/SignupForm.css b/src/SignupForm.css
index bd91b14..b15ea5e 100644
--- a/src/SignupForm.css
+++ b/src/SignupForm.css
@@ -7,6 +7,10 @@
   position: relative;
 }
 
+.SignupForm--extend {
+  margin-bottom: 35px;
+}
+
 .SignupForm > input {
   flex: 1 1 100%;
   font-size: 14px;
diff --git a/src/SignupForm.js b/src/SignupForm.js
index 222b879..b7fe21b 100644
--- a/src/SignupForm.js
+++ b/src/SignupForm.js
@@ -60,7 +60,7 @@ class SubscribeForm extends Component {
     const { action, messages } = this.props
     const { status, msg } = this.state
     return (
-      <form className="SignupForm" action={action} method="post" noValidate>
+      <form className={`SignupForm${status ? ' SignupForm--extend' : ''}`} action={action} method="post" noValidate>
         <input
           ref={node => (this.input = node)}
           type="email"