Make the drag box fill the remaining height of window

diff --git a/default_app/index.html b/default_app/index.html
index c10d67a..a6126e5 100644 (file)
--- a/default_app/index.html
+++ b/default_app/index.html
@@ -10,10 +10,15 @@
       font-variant: normal;
       padding: 0;
       margin: 0;
+      display: flex;
+      flex-direction: column;
     }
 
     .container {
-      padding: 15px 30px;
+      margin: 15px 30px 30px 30px;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
     }
 
     .header {
@@ -90,11 +95,9 @@
 
     #holder {
       display: flex;
+      flex: 1;
       align-items: center;
       justify-content: center;
-      margin: 0 auto;
-      padding: 10px;
-      height: 275px;
       border: 1px solid #e0e5e6;
       background-color: #f6f8f8;
       color: #466a72;
@@ -132,7 +135,7 @@
     };
   </script>
 
-  <header class="header">
+  <div class="header">
     <svg class="header-icon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
       <g stroke="none" fill="none" fill-rule="evenodd">
         <path class="svg-stroke" d="M11.7014354,7.72646259 C7.91761319,7.04380371 4.81334929,7.69369948 3.61536899,9.74908711 C2.72656361,11.27402 3.03878853,13.3122813 4.27551338,15.4489979 M6.32642733,18.1886712 C7.89193828,19.8928217 9.9666792,21.548102 12.4120986,22.9466461 C18.2414315,26.2804624 24.2930499,27.0779063 27.1669222,25.1368228 M29.8456419,24.0565148 C29.8456419,23.1971812 29.1423799,22.5005537 28.2748621,22.5005537 C27.4073444,22.5005537 26.7040823,23.1971812 26.7040823,24.0565148 C26.7040823,24.9158484 27.4073444,25.612476 28.2748621,25.612476 C29.1423799,25.612476 29.8456419,24.9158484 29.8456419,24.0565148 L29.8456419,24.0565148 Z"></path>
@@ -154,7 +157,7 @@
       <a href="https://github.com/electron/electron">Repository</a>
       <a href="http://electron.atom.io/blog">Blog</a>
     </div>
-  </header>
+  </div>
 
   <div class="container">