Fixed CSS for maximising output pane

src/web/html/index.html

@@ -176,7 +176,7 @@
                 <div id="recipe" class="split split-horizontal no-select">
                     <div class="title no-select">
                         Recipe
-                        <span class="float-right">
+                        <span class="pane-controls hide-on-maximised-output">
                             <button type="button" class="btn btn-primary bmd-btn-icon" id="save" data-toggle="tooltip" title="Save recipe">
                                 <i class="material-icons">save</i>
                             </button>
@@ -190,7 +190,7 @@
                     </div>
                     <ul id="rec-list" class="list-area no-select"></ul>
 
-                    <div id="controls" class="no-select">
+                    <div id="controls" class="no-select hide-on-maximised-output">
                         <div id="controls-content" class="d-flex align-items-center">
                             <button type="button" class="mx-2 btn btn-lg btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe">
                                 Step
@@ -217,7 +217,10 @@
                     <div id="input" class="split no-select">
                         <div class="title no-select">
                             <label for="input-text">Input</label>
-                            <span class="float-right">
+                            <span class="pane-controls">
+                                <div class="io-info" id="input-files-info"></div>
+                                <div class="io-info" id="input-selection-info"></div>
+                                <div class="io-info" id="input-info"></div>
                                 <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-new-tab" data-toggle="tooltip" title="Add a new input tab">
                                     <i class="material-icons">add</i>
                                 </button>
@@ -236,9 +239,7 @@
                                     <i class="material-icons">view_compact</i>
                                 </button>
                             </span>
-                            <div class="io-info" id="input-files-info"></div>
-                            <div class="io-info" id="input-info"></div>
-                            <div class="io-info" id="input-selection-info"></div>
+
                         </div>
                         <div id="input-tabs-wrapper" style="display: none;" class="no-select">
                             <span id="btn-previous-input-tab" class="input-tab-buttons">
@@ -288,7 +289,10 @@
                     <div id="output" class="split">
                         <div class="title no-select">
                             <label for="output-text">Output</label>
-                            <span class="float-right">
+                            <span class="pane-controls">
+                                <div class="io-info" id="bake-info"></div>
+                                <div class="io-info" id="output-selection-info"></div>
+                                <div class="io-info" id="output-info"></div>
                                 <button type="button" class="btn btn-primary bmd-btn-icon" id="save-all-to-file" data-toggle="tooltip" title="Save all outputs to a zip file" style="display: none">
                                         <i class="material-icons">archive</i>
                                     </button>
@@ -308,9 +312,7 @@
                                     <i class="material-icons">fullscreen</i>
                                 </button>
                             </span>
-                            <div class="io-info" id="bake-info"></div>
-                            <div class="io-info" id="output-info"></div>
-                            <div class="io-info" id="output-selection-info"></div>
+
                             <button type="button" class="btn btn-primary bmd-btn-icon hidden" id="magic" data-toggle="tooltip" title="Magic!" data-html="true">
                                 <svg width="22" height="22" viewBox="0 0 24 24">
                                     <path d="M7.5,5.6L5,7L6.4,4.5L5,2L7.5,3.4L10,2L8.6,4.5L10,7L7.5,5.6M19.5,15.4L22,14L20.6,16.5L22,19L19.5,17.6L17,19L18.4,16.5L17,14L19.5,15.4M22,2L20.6,4.5L22,7L19.5,5.6L17,7L18.4,4.5L17,2L19.5,3.4L22,2M13.34,12.78L15.78,10.34L13.66,8.22L11.22,10.66L13.34,12.78M14.37,7.29L16.71,9.63C17.1,10 17.1,10.65 16.71,11.04L5.04,22.71C4.65,23.1 4,23.1 3.63,22.71L1.29,20.37C0.9,20 0.9,19.35 1.29,18.96L12.96,7.29C13.35,6.9 14,6.9 14.37,7.29Z" />

src/web/stylesheets/components/_pane.css

@@ -24,9 +24,16 @@
     line-height: calc(var(--title-height) - 14px);
 }
 
-.title>span,
-.title>.btn {
-    margin-top: -4px;
+.pane-controls {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    display: flex;
+    flex-direction: row;
+}
+
+.pane-controls .btn {
+    margin-left: 2px;
 }
 
 .list-area {
@@ -107,4 +114,4 @@
 
 #files .card-header .float-right a:hover {
     text-decoration: none;
-}
+}

src/web/stylesheets/layout/_controls.css

@@ -58,6 +58,10 @@
     border-radius: 30px;
 }
 
+.output-maximised .hide-on-maximised-output {
+    display: none !important;
+}
+
 .spin {
     animation-name: spin;
     animation-duration: 3s;

src/web/stylesheets/layout/_io.css

@@ -280,9 +280,8 @@
 }
 
 .io-info {
-    margin-right: 20px;
+    margin-right: 18px;
     margin-top: 1px;
-    float: right;
     height: 30px;
     text-align: right;
     line-height: 12px;

src/web/waiters/OutputWaiter.mjs

@@ -1373,6 +1373,7 @@ class OutputWaiter {
         const el = e.target.id === "maximise-output" ? e.target : e.target.parentNode;
 
         if (el.getAttribute("data-original-title").indexOf("Maximise") === 0) {
+            document.body.classList.add("output-maximised");
             this.app.initialiseSplitter(true);
             this.app.columnSplitter.collapse(0);
             this.app.columnSplitter.collapse(1);
@@ -1381,6 +1382,7 @@ class OutputWaiter {
             $(el).attr("data-original-title", "Restore output pane");
             el.querySelector("i").innerHTML = "fullscreen_exit";
         } else {
+            document.body.classList.remove("output-maximised");
             $(el).attr("data-original-title", "Maximise output pane");
             el.querySelector("i").innerHTML = "fullscreen";
             this.app.initialiseSplitter(false);