[#181] a few cosmetic touch ups, todo update

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

@@ -25,12 +25,12 @@ label[for="output-text"] {
 
 #input .cm-scroller,
 #output .cm-scroller {
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 
 #input .cm-scroller:hover,
 #output .cm-scroller:hover {
-    cursor: pointer;
+    cursor: initial;
 }
 
 #output-text.html-output .cm-content,
@@ -79,7 +79,6 @@ label[for="output-text"] {
     display: flex;
     justify-content: center;
     align-items: center;
-
     transition: all 0.5s ease;
 }
 

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

@@ -21,7 +21,7 @@
     width: 100%;
     min-width: 120px;
     float: left;
-    padding: 0px;
+    padding: 0;
     text-align: center;
     border-right: 1px solid var(--primary-border-colour);
     height: var(--tab-height);

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

@@ -2,6 +2,9 @@
  * Operations - Categories list
  */
 
+#categories {
+    border-top: 1px solid var(--primary-border-colour);
+}
 
 .category-title {
     display: flex;

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

@@ -7,3 +7,4 @@
     padding-right: 10px;
     background-image: none;
 }
+

src/web/stylesheets/layout/_structure.css

@@ -6,20 +6,15 @@
  * @license Apache-2.0
  */
 
-/* Together, they make up 100vh */
 :root {
     --banner-height: 40px;
     --controls-height: 70px;
-    --workspace-height: calc( 100vh - calc( var(--banner-height) + var(--controls-height)));;
-    --recipe-height: 20vh;
-    --operations-height: 88px;
+    --workspace-height: calc( 100vh - var(--banner-height) - var(--controls-height));
+    --recipe-height: 16vh;
+    --operations-height: 89px;
     --io-height: calc(100vh - var(--banner-height) - var(--controls-height) - var(--recipe-height) - var(--operations-height));
 }
 
-body {
-    overflow: hidden;
-}
-
 #banner,
 #content-wrapper {
     position: absolute;
@@ -46,7 +41,23 @@ body {
     bottom: 0;
 }
 
+#IO {
+    padding-bottom: var(--controls-height);
+}
+
 @media only screen and ( min-width: 768px ) {
+    #IO {
+        padding-bottom: 0;
+    }
+
+    #recipe {
+        padding-bottom: var(--controls-height);
+    }
+
+    #recipe .list-area  {
+        bottom: var(--controls-height);
+    }
+
     #workspace-wrapper {
         height: calc( 100vh - var(--banner-height));
     }