Fix layouting

assets/pwny.js

@@ -97,6 +97,26 @@
         ],
         '#drawer ul'
       );
+      self.append(
+        self.createElement(
+          'div',
+          null,
+          [
+            ['id', 'table']
+          ]
+        ),
+        '#app'
+      );
+      self.append(
+        self.createElement(
+          'div',
+          null,
+          [
+            ['id', 'table-row']
+          ]
+        ),
+        '#table'
+      );
       self.append(
         [
           self.createElement(
@@ -112,9 +132,9 @@
             [
               ['id', 'col2']
             ]
-          ),
+          )
         ],
-        '#app'
+        '#table-row'
       );
       self.append(
         self.createElement(
@@ -267,8 +287,8 @@
       col2.style.display = 'block';
       col2.style.width = '100%';
       col1.parentNode.removeChild(col1);
-      ifr.style.border = '0 none';
-      ifr.style.marginTop = '0';
+      $(ifr).addClass('fullscreen');
+      $('#table').addClass('fullscreen');
     };
 
     this.loadFromHash = function() {
@@ -369,7 +389,7 @@
         col2.style.display = 'none';
         btn_run.style.display = 'none';
       } else {
-        col2.style.display = 'inline-block';
+        col2.style.display = 'table-cell';
         btn_run.style.display = 'inline-block';
       }
     };

index.html

@@ -18,28 +18,42 @@ html,body,div,iframe {margin:0;padding:0;border:0 none;}
 #drawer select {font-family:"Helvetica Neue", "Calibri Light", Roboto, sans-serif;border:1px solid #333;margin:3px;font-size:1rem;padding:0.75rem 1.35rem;}
 #app iframe {display:block;border:1px solid #444;margin-top:0;}
 html,body,#app{margin:0;padding:0;width:100%;height:100%;}
-
 @media (max-width: 1000px) {
   body #app #logo {display: none;}
   body #app {margin-top: 25px;}
 }
-
+#table {
+  display: table;
+  width: 100%;
+  height: calc(100% - 111px);
+}
+#table-row {
+  display: table-row;
+  width: 100%;
+  height: 100%;
+}
 #app {
   display: none;
   box-sizing: border-box;
-  margin: 100px 0 0 0;
+  margin: 111px 0 0 0;
   width: 100%;
-  height: calc(100%-50px);
+  height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   overflow-scrolling: touch;
   padding: 20px;
 }
-#col1, #col2 {display:inline-block;}
-#col1 {width: 49.5%;height: 100%;float:left;overflow:auto;}
-#col1 .ace_editor {width:100%;height:85%;}
-#col2 {width: 49.5%;height: 100%;float:right;}
-#col2 iframe {width:100%;height:100%;}
+#col1, #col2 {height:100%;width:50%;display:table-cell;}
+#col1 .ace_editor {width:100%;height:100%;}
+#col2 iframe {position:relative;top:-10px;left:10px;width:100%;height:100%;}
+#app #col2 iframe.fullscreen {
+  position:relative;top:0;left:0;width:100%;height:100%;
+  border: 0 none;
+  margin-top: 0;
+}
+#app #table.fullscreen {
+  height: 100%;
+}
 #btn_run {
   background-color: #82BF56;
   border-bottom: 5px solid #669644;
@@ -170,7 +184,7 @@ html,body,#app{margin:0;padding:0;width:100%;height:100%;}
   left: 0;
 }
 
-#drawer-toggle:checked ~ #app { margin-left: 300px; }
+#drawer-toggle:checked ~ #app { margin-left: 300px; width: calc(100% - 300px); }
   @media screen and (min-width: 380px) {
     #drawer-toggle:checked ~ #drawer-toggle-label,
     #drawer-toggle:checked ~ #drawer {