improved layout and fixed bugs introduced new ones

codeeditor-app/app.html

@@ -1,15 +1,15 @@
 <div class="flex-vert">
     <div class="flex-shrink section top">
         <h1>code editor</h1>
-        <window-control>
+        <window-control distribute=".code-editor-containers">
             <window-control-connector target="code-editor-container[language='Javascript']" class="active">Javascript</window-control-connector>
             <window-control-connector target="code-editor-container[language='HTML']">HTML</window-control-connector>
             <window-control-connector target="code-editor-container[language='CSS']">CSS</window-control-connector>
         </window-control>
     </div>
-    <div class="flex-horiz">
-        <div class="code-editor-containers resize-target flex-vert" style="min-width: 50%; max-width: 50%;">
-            <code-editor-container language="Javascript" dir="vertical">
+    <div class="flex-dynamic">
+        <div class="code-editor-containers flex-vert">
+            <code-editor-container language="Javascript" dir="vertical" class="first-visible last-visible">
             </code-editor-container>
             
             <code-editor-container language="HTML" dir="vertical" style="display: none;">
@@ -18,8 +18,9 @@
             <code-editor-container language="CSS" dir="vertical" style="display: none;">
             </code-editor-container>
         </div>
-        <div>
-            <resize-handle target=".resize-target" dir="horizontal"></resize-handle>
+        <div class="output-frame-container">
+            <resize-handle target=".code-editor-containers" dir="horizontal"></resize-handle>
+            <resize-handle target=".code-editor-containers" dir="vertical" place="top"></resize-handle>
             <output-frame></output-frame>
         </div>
     </div>