Player: group all output windows

src/components/Player/Player.jsx

@@ -42,7 +42,10 @@ const Handlers = ({
   onUpdateWindows: windows => {
     setWindows(windows)
   },
-  onUpdateInputs: ([{type, id}]) => {
+  onUpdateInputs: data => {
+    if (data.length === 0) return void null
+
+    const {type, id} = data[0]
     setCurrentWindowId(id)
     setInputType(type)
   },
@@ -111,12 +114,18 @@ export default function ({ vmParts: { file, engine } }) {
     })[currentWindow.type]
   }
 
+  const byTop = (a, b) =>
+    a.top - b.top
+
   return status.stage !== 'ready'
     ? (<Status {...status} />)
     : (<section className='ifplayer'>
-        { windows
+        <section className='output'>{
+          windows
+            .sort(byTop)
             // .filter(({id}) => id === currentWindowId)
             .map(textWindow(inbox))}
+        </section>
         <InputBox {...{
           inputType,
           windows,

src/components/Player/player.css

@@ -35,11 +35,19 @@
   display: none;
 }
 
+.ifplayer .output {
+  display: flex;
+  flex-grow: 2;
+  flex-direction: column;
+  overflow-y: hidden;
+
+  border: var(--border-width) solid var(--main-color);
+}
+
 .ifplayer .buffer {
   overflow-y: scroll;
   box-sizing: border-box;
 
-  border: var(--border-width) solid var(--main-color);
   padding: var(--inner-padding);
 
   scrollbar-color: var(--main-color) var(--bg-color);
@@ -58,11 +66,11 @@
 
 .ifplayer .gridBuffer {
   flex-shrink: 0;
-  border-bottom: 0;
+  border-bottom: var(--border-width) solid var(--main-color);
 }
 
 .ifplayer .textBuffer {
-  flex: 2 1 auto;
+  flex: 2 1;
 }
 
 .ifplayer .textBuffer > br:first-child,