[#181] add maximiser icons to recipe, input and output, and handle maximising of targets accordingly. Desktop view remains as normal, where only output can be maximised

src/web/stylesheets/components/_controls.css

@@ -52,8 +52,8 @@
     margin: 0;
 }
 
-.output-maximised .hide-on-maximised-output {
-    display: none !important;
+.top-zindex {
+    z-index: 200;
 }
 
 

src/web/stylesheets/components/_recipe.css

@@ -8,6 +8,7 @@
 
 #recipe {
     position: relative;
+    background-color: var(--primary-background-colour);
 }
 
 #rec-list {

src/web/stylesheets/components/io/_io.css

@@ -6,6 +6,11 @@
  * @license Apache-2.0
  */
 
+#input,
+#output {
+    background-color: var(--primary-background-colour);
+}
+
 #input-text,
 #output-text {
     position: relative;

src/web/stylesheets/components/operations/_operations.css

@@ -5,6 +5,10 @@
  * can ( should ) be made into a reusable, generic component
  */
 
+#operations {
+    background-color: var(--primary-background-colour);
+}
+
 #operations-wrapper {
     position: relative;
 }

src/web/stylesheets/layout/_structure.css

@@ -24,6 +24,7 @@
 #content-wrapper {
     top: 0;
     bottom: 0;
+    overflow: hidden;
 }
 
 #workspace-wrapper {
@@ -45,6 +46,22 @@
     padding-bottom: var(--controls-height);
 }
 
+#recipe.maximised-pane,
+#input.maximised-pane,
+#output.maximised-pane {
+    position: fixed;
+    min-height: calc( 100vh - var(--banner-height ));
+    height: auto;
+    top: var(--banner-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+#recipe.maximised-pane #controls {
+    display: none;
+}
+
 @media only screen and ( min-width: 768px ) {
     #IO {
         padding-bottom: 0;