diff --git a/src/web/stylesheets/components/_list.css b/src/web/stylesheets/components/_list.css
index 45f5a4d1..d9cd3bd5 100755
--- a/src/web/stylesheets/components/_list.css
+++ b/src/web/stylesheets/components/_list.css
@@ -41,3 +41,16 @@
     border-radius: 0 !important;
     border: none;
 }
+
+#search-results,
+#categories {
+    position: absolute;
+    top: 40px; /* the height of the input[type="search"] with pos relative */
+    left: 0;
+    right: 0;
+    height: auto;
+    max-height: 60vh;
+    overflow: scroll;
+    border-bottom: 1px solid var(--primary-border-colour);
+    z-index: 20; /* to dropdown on top of all the other elements */
+}
diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css
index 25722bfe..3c772691 100755
--- a/src/web/stylesheets/components/_operation.css
+++ b/src/web/stylesheets/components/_operation.css
@@ -321,21 +321,9 @@ input.toggle-string {
     background-color: var(--disabled-border-colour) !important;
 }
 
-/* ================ experimentation ================ */
-
-#search-results,
-#categories {
-    position: absolute;
-    top: 40px; /* the height of the search input */
-    left: 0;
-    right: 0;
-    height: auto;
-    max-height: 60vh;
-    overflow: scroll;
-    border-bottom: 1px solid var(--primary-border-colour);
-
-    z-index: 20;
-    display: inline-block;
+/* Mobile UI for the dropdown operations search */
+.dropdown-operations {
+    position: relative;
 }
 
 #reset-operations.hidden,
@@ -344,24 +332,11 @@ input.toggle-string {
     z-index: -10;
     display: none;
 }
+/* end mobile UI for the dropdown operations search */
+
+
+
 
-.foo,
-#recipe {
-    position: relative;
-}
 
-#rec-list {
-    position: absolute;
-    top: 48px; /* the height of recipe title */
-    left: 0;
-    right: 0;
-    height: 100%;
-}
 
-#controls {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
 
diff --git a/src/web/stylesheets/components/_recipe.css b/src/web/stylesheets/components/_recipe.css
index e69de29b..a90b92a0 100644
--- a/src/web/stylesheets/components/_recipe.css
+++ b/src/web/stylesheets/components/_recipe.css
@@ -0,0 +1,9 @@
+#recipe {
+    position: relative;
+}
+
+#rec-list .operation {
+    color: var(--rec-list-operation-font-colour);
+    background-color: var(--rec-list-operation-bg-colour);
+    border-color: var(--rec-list-operation-border-colour);
+}
diff --git a/src/web/stylesheets/components/io/_file-details.css b/src/web/stylesheets/components/io/_file-details.css
index e69de29b..0f18546c 100644
--- a/src/web/stylesheets/components/io/_file-details.css
+++ b/src/web/stylesheets/components/io/_file-details.css
@@ -0,0 +1,75 @@
+/* File details panel */
+
+.cm-file-details {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;
+    padding-bottom: 21px;
+    height: 100%;
+}
+
+.file-details-toggle-shown,
+.file-details-toggle-hidden {
+    width: 8px;
+    height: 40px;
+    border: 1px solid var(--secondary-border-colour);
+    position: absolute;
+    top: calc(50% - 20px);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--secondary-border-colour);
+    color: var(--subtext-font-colour);
+    z-index: 1;
+}
+
+.file-details-toggle-shown {
+    left: 0;
+    border-left: none;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+.file-details-toggle-hidden {
+    left: -8px;
+    border-right: none;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+}
+
+.file-details-toggle-shown:hover,
+.file-details-toggle-hidden:hover {
+    background-color: var(--primary-border-colour);
+    border-color: var(--primary-border-colour);
+    color: var(--primary-font-colour);
+}
+
+.file-details-heading {
+    font-weight: bold;
+    margin: 10px 0 10px 0;
+}
+
+.file-details-data {
+    text-align: left;
+    margin: 10px 2px;
+}
+
+.file-details-data td {
+    padding: 0 3px;
+    max-width: 130px;
+    min-width: 60px;
+    overflow: hidden;
+    vertical-align: top;
+    word-break: break-all;
+}
+
+.file-details-error {
+    color: #f00;
+}
+
+.file-details-thumbnail {
+    max-width: 180px;
+}
diff --git a/src/web/stylesheets/components/io/_highlighting.css b/src/web/stylesheets/components/io/_highlighting.css
index e69de29b..fa296dbf 100644
--- a/src/web/stylesheets/components/io/_highlighting.css
+++ b/src/web/stylesheets/components/io/_highlighting.css
@@ -0,0 +1,21 @@
+/* Highlighting */
+.ͼ2.cm-focused .cm-selectionBackground {
+    background-color: var(--hl5);
+}
+
+.ͼ2 .cm-selectionBackground {
+    background-color: var(--hl1);
+}
+
+.ͼ1 .cm-selectionMatch {
+    background-color: var(--hl2);
+}
+
+.ͼ1.cm-focused .cm-cursor.cm-cursor-primary {
+    border-color: var(--primary-font-colour);
+}
+
+.ͼ1 .cm-cursor.cm-cursor-primary {
+    display: block;
+    border-color: var(--subtext-font-colour);
+}
diff --git a/src/web/stylesheets/components/io/_icons.css b/src/web/stylesheets/components/io/_icons.css
index e69de29b..9b009495 100644
--- a/src/web/stylesheets/components/io/_icons.css
+++ b/src/web/stylesheets/components/io/_icons.css
@@ -0,0 +1,35 @@
+#stale-indicator {
+    opacity: 1;
+    visibility: visible;
+    transition: margin 0s, opacity 0.3s;
+    margin-left: 5px;
+    cursor: help;
+}
+
+#stale-indicator i {
+    vertical-align: middle;
+    margin-bottom: 5px;
+}
+
+#magic {
+    opacity: 1;
+    visibility: visible;
+    transition: margin 0s 0.3s, opacity 0.3s 0.3s, visibility 0.3s 0.3s;
+    margin-left: 5px;
+    margin-bottom: 5px;
+}
+
+#magic.hidden,
+#stale-indicator.hidden {
+    visibility: hidden;
+    transition: opacity 0.3s, margin 0.3s 0.3s, visibility 0.3s;
+    opacity: 0;
+}
+
+#magic.hidden {
+    margin-left: -32px;
+}
+
+#magic svg path {
+    fill: var(--primary-font-colour);
+}
diff --git a/src/web/stylesheets/components/io/_search-results.css b/src/web/stylesheets/components/io/_search-results.css
index e69de29b..fe54a257 100644
--- a/src/web/stylesheets/components/io/_search-results.css
+++ b/src/web/stylesheets/components/io/_search-results.css
@@ -0,0 +1,32 @@
+#input-search-results,
+#output-search-results {
+    list-style: none;
+    width: 75%;
+    min-width: 200px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#input-search-results li,
+#output-search-results li {
+    padding: 10px 5px;
+    text-align: center;
+    width: 100%;
+    color: var(--op-list-operation-font-colour);
+    background-color: var(--op-list-operation-bg-colour);
+    border-bottom: 2px solid var(--op-list-operation-border-colour);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+#input-search-results li:first-of-type,
+#output-search-results li:first-of-type {
+    border-top: 2px solid var(--op-list-operation-border-colour);
+}
+
+#input-search-results li:hover,
+#output-search-results li:hover {
+    cursor: pointer;
+    filter: brightness(98%);
+}
diff --git a/src/web/stylesheets/components/io/_status-bar.css b/src/web/stylesheets/components/io/_status-bar.css
index e69de29b..ea0bad12 100644
--- a/src/web/stylesheets/components/io/_status-bar.css
+++ b/src/web/stylesheets/components/io/_status-bar.css
@@ -0,0 +1,114 @@
+/* Status bar */
+
+.cm-panel input::placeholder {
+    font-size: 12px !important;
+}
+
+.ͼ2 .cm-panels,
+.ͼ2 .cm-side-panels {
+    background-color: var(--secondary-background-colour);
+    /*border-color: var(--primary-border-colour);*/
+    color: var(--primary-font-colour);
+    border-bottom: 1px solid var(--primary-border-colour);
+}
+
+.cm-status-bar {
+    font-family: var(--fixed-width-font-family);
+    font-weight: normal;
+    font-size: 8pt;
+    /*0 5px for desktop*/
+    margin: 5px 15px;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.cm-status-bar i {
+    font-size: 12pt;
+    vertical-align: middle;
+    margin-left: 8px;
+}
+.cm-status-bar>div>span:first-child i {
+    margin-left: 0;
+}
+
+.cm-status-bar .disabled {
+    background-color: unset !important;
+    cursor: not-allowed;
+}
+
+/* Dropup Button */
+.cm-status-bar-select-btn {
+    border: none;
+    cursor: pointer;
+}
+
+/* The container <div> - needed to position the dropup content */
+.cm-status-bar-select {
+    position: relative;
+    display: inline-block;
+}
+
+/* Dropup content (Hidden by Default) */
+.cm-status-bar-select-content {
+    display: none;
+    position: absolute;
+    bottom: 20px;
+    right: 0;
+    background-color: #f1f1f1;
+    min-width: 200px;
+    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+/* Links inside the dropup */
+.cm-status-bar-select-content a {
+    color: black;
+    padding: 2px 5px;
+    text-decoration: none;
+    display: block;
+}
+
+/* Change color of dropup links on hover */
+.cm-status-bar-select-content a:hover {
+    background-color: #ddd
+}
+
+/* Change the background color of the dropup button when the dropup content is shown */
+.cm-status-bar-select:hover .cm-status-bar-select-btn {
+    background-color: #f1f1f1;
+}
+
+/* The search field */
+.cm-status-bar-filter-input {
+    box-sizing: border-box;
+    font-size: 12px;
+    padding-left: 10px !important;
+    border: none;
+}
+
+.cm-status-bar-filter-search {
+    border-top: 1px solid #ddd;
+}
+
+/* Show the dropup menu */
+.cm-status-bar-select .show {
+    display: block;
+}
+
+.cm-status-bar-select-scroll {
+    overflow-y: auto;
+    max-height: 300px;
+}
+
+.chr-enc-value {
+    max-width: 150px;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+}
+
+
diff --git a/src/web/stylesheets/components/io/_tabs.css b/src/web/stylesheets/components/io/_tabs.css
index e69de29b..fcb3abc6 100644
--- a/src/web/stylesheets/components/io/_tabs.css
+++ b/src/web/stylesheets/components/io/_tabs.css
@@ -0,0 +1,112 @@
+#input-tabs-wrapper #input-tabs,
+#output-tabs-wrapper #output-tabs {
+    list-style: none;
+    background-color: var(--title-background-colour);
+    padding: 0;
+    margin: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    display: flex;
+    flex-direction: row;
+    border-bottom: 1px solid var(--primary-border-colour);
+    border-left: 1px solid var(--primary-border-colour);
+    height: var(--tab-height);
+    clear: none;
+}
+
+#input-tabs li,
+#output-tabs li {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    min-width: 120px;
+    float: left;
+    padding: 0px;
+    text-align: center;
+    border-right: 1px solid var(--primary-border-colour);
+    height: var(--tab-height);
+    vertical-align: middle;
+}
+
+#input-tabs li:hover,
+#output-tabs li:hover {
+    cursor: pointer;
+    background-color: var(--primary-background-colour);
+}
+
+.active-input-tab,
+.active-output-tab {
+    font-weight: bold;
+    background-color: var(--primary-background-colour);
+}
+
+.input-tab-content+.btn-close-tab {
+    display: block;
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-right: 2px;
+}
+
+.input-tab-content+.btn-close-tab i {
+    font-size: 0.8em;
+}
+
+.input-tab-buttons,
+.output-tab-buttons {
+    width: 25px;
+    text-align: center;
+    margin: 0;
+    height: var(--tab-height);
+    line-height: var(--tab-height);
+    font-weight: bold;
+    background-color: var(--title-background-colour);
+    border-bottom: 1px solid var(--primary-border-colour);
+}
+
+.input-tab-buttons:hover,
+.output-tab-buttons:hover {
+    cursor: pointer;
+    background-color: var(--primary-background-colour);
+}
+
+#btn-next-input-tab,
+#btn-input-tab-dropdown,
+#btn-next-output-tab,
+#btn-output-tab-dropdown {
+    float: right;
+}
+
+#btn-previous-input-tab,
+#btn-previous-output-tab {
+    float: left;
+}
+
+#btn-close-all-tabs {
+    color: var(--breakpoint-font-colour) !important;
+}
+
+.input-tab-content,
+.output-tab-content {
+    width: 100%;
+    max-width: 100%;
+    padding: 10px 5px;
+    height: var(--tab-height);
+    vertical-align: middle;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.btn-close-tab {
+    height: var(--tab-height);
+    vertical-align: middle;
+    width: fit-content;
+}
+
+.tabs-left > li:first-child {
+    box-shadow: 15px 0 15px -15px var(--primary-border-colour) inset;
+}
+
+.tabs-right > li:last-child {
+    box-shadow: -15px 0 15px -15px var(--primary-border-colour) inset;
+}
diff --git a/src/web/stylesheets/index.css b/src/web/stylesheets/index.css
index 960c7006..9049f407 100755
--- a/src/web/stylesheets/index.css
+++ b/src/web/stylesheets/index.css
@@ -25,6 +25,13 @@
 @import "./components/_list.css";
 @import "./components/_operation.css";
 @import "./components/_pane.css";
+@import "./components/_recipe.css";
+@import "./components/io/_search-results.css";
+@import "./components/io/_tabs.css";
+@import "./components/io/_icons.css";
+@import "./components/io/_highlighting.css";
+@import "./components/io/_status-bar.css";
+@import "./components/io/_file-details.css";
 
 /* Layout */
 @import "./layout/_banner.css";
diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css
index 0805b2a4..6044e570 100755
--- a/src/web/stylesheets/layout/_io.css
+++ b/src/web/stylesheets/layout/_io.css
@@ -17,6 +17,17 @@
     user-select: auto;
 }
 
+/* To vertically align the title nicely in the center */
+label[for="input-text"],
+label[for="output-text"] {
+    line-height: revert;
+}
+
+#input .cm-scroller,
+#output .cm-scroller {
+    overflow-y: scroll;
+}
+
 #input .cm-scroller:hover,
 #output .cm-scroller:hover {
     cursor: pointer;
@@ -29,6 +40,7 @@
     height: 100%;
     user-select: auto;
 }
+
 #output-text.html-output .cm-line .cm-widgetBuffer,
 #output-text.html-output .cm-line>br {
     display: none;
@@ -44,120 +56,6 @@
     color: var(--fixed-width-font-colour);
 }
 
-#input-tabs-wrapper #input-tabs,
-#output-tabs-wrapper #output-tabs {
-    list-style: none;
-    background-color: var(--title-background-colour);
-    padding: 0;
-    margin: 0;
-    overflow-x: auto;
-    overflow-y: hidden;
-    display: flex;
-    flex-direction: row;
-    border-bottom: 1px solid var(--primary-border-colour);
-    border-left: 1px solid var(--primary-border-colour);
-    height: var(--tab-height);
-    clear: none;
-}
-
-#input-tabs li,
-#output-tabs li {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    min-width: 120px;
-    float: left;
-    padding: 0px;
-    text-align: center;
-    border-right: 1px solid var(--primary-border-colour);
-    height: var(--tab-height);
-    vertical-align: middle;
-}
-
-#input-tabs li:hover,
-#output-tabs li:hover {
-    cursor: pointer;
-    background-color: var(--primary-background-colour);
-}
-
-.active-input-tab,
-.active-output-tab {
-    font-weight: bold;
-    background-color: var(--primary-background-colour);
-}
-
-.input-tab-content+.btn-close-tab {
-    display: block;
-    margin-top: auto;
-    margin-bottom: auto;
-    margin-right: 2px;
-}
-
-.input-tab-content+.btn-close-tab i {
-    font-size: 0.8em;
-}
-
-.input-tab-buttons,
-.output-tab-buttons {
-    width: 25px;
-    text-align: center;
-    margin: 0;
-    height: var(--tab-height);
-    line-height: var(--tab-height);
-    font-weight: bold;
-    background-color: var(--title-background-colour);
-    border-bottom: 1px solid var(--primary-border-colour);
-}
-
-.input-tab-buttons:hover,
-.output-tab-buttons:hover {
-    cursor: pointer;
-    background-color: var(--primary-background-colour);
-}
-
-
-#btn-next-input-tab,
-#btn-input-tab-dropdown,
-#btn-next-output-tab,
-#btn-output-tab-dropdown {
-    float: right;
-}
-
-#btn-previous-input-tab,
-#btn-previous-output-tab {
-    float: left;
-}
-
-#btn-close-all-tabs {
-    color: var(--breakpoint-font-colour) !important;
-}
-
-.input-tab-content,
-.output-tab-content {
-    width: 100%;
-    max-width: 100%;
-    padding: 10px 5px;
-    height: var(--tab-height);
-    vertical-align: middle;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.btn-close-tab {
-    height: var(--tab-height);
-    vertical-align: middle;
-    width: fit-content;
-}
-
-.tabs-left > li:first-child {
-    box-shadow: 15px 0px 15px -15px var(--primary-border-colour) inset;
-}
-
-.tabs-right > li:last-child {
-    box-shadow: -15px 0px 15px -15px var(--primary-border-colour) inset;
-}
-
 #input-wrapper,
 #output-wrapper {
     height: calc(100% - var(--title-height));
@@ -223,42 +121,6 @@
     border: 5px dashed var(--drop-file-border-colour) !important;
 }
 
-#stale-indicator {
-    opacity: 1;
-    visibility: visible;
-    transition: margin 0s, opacity 0.3s;
-    margin-left: 5px;
-    cursor: help;
-}
-
-#stale-indicator i {
-    vertical-align: middle;
-    margin-bottom: 5px;
-}
-
-#magic {
-    opacity: 1;
-    visibility: visible;
-    transition: margin 0s 0.3s, opacity 0.3s 0.3s, visibility 0.3s 0.3s;
-    margin-left: 5px;
-    margin-bottom: 5px;
-}
-
-#magic.hidden,
-#stale-indicator.hidden {
-    visibility: hidden;
-    transition: opacity 0.3s, margin 0.3s 0.3s, visibility 0.3s;
-    opacity: 0;
-}
-
-#magic.hidden {
-    margin-left: -32px;
-}
-
-#magic svg path {
-    fill: var(--primary-font-colour);
-}
-
 .pulse {
     box-shadow: 0 0 0 0 rgba(90, 153, 212, .3);
     animation: pulse 1.5s 1;
@@ -343,250 +205,3 @@
     padding: 10px;
     text-align: center;
 }
-
-
-#input-search-results,
-#output-search-results {
-    list-style: none;
-    width: 75%;
-    min-width: 200px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-#input-search-results li,
-#output-search-results li {
-    padding: 10px 5px;
-    text-align: center;
-    width: 100%;
-    color: var(--op-list-operation-font-colour);
-    background-color: var(--op-list-operation-bg-colour);
-    border-bottom: 2px solid var(--op-list-operation-border-colour);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-#input-search-results li:first-of-type,
-#output-search-results li:first-of-type {
-    border-top: 2px solid var(--op-list-operation-border-colour);
-}
-
-#input-search-results li:hover,
-#output-search-results li:hover {
-    cursor: pointer;
-    filter: brightness(98%);
-}
-
-/* Highlighting */
-.ͼ2.cm-focused .cm-selectionBackground {
-    background-color: var(--hl5);
-}
-
-.ͼ2 .cm-selectionBackground {
-    background-color: var(--hl1);
-}
-
-.ͼ1 .cm-selectionMatch {
-    background-color: var(--hl2);
-}
-
-.ͼ1.cm-focused .cm-cursor.cm-cursor-primary {
-    border-color: var(--primary-font-colour);
-}
-
-.ͼ1 .cm-cursor.cm-cursor-primary {
-    display: block;
-    border-color: var(--subtext-font-colour);
-}
-
-
-/* Status bar */
-
-.cm-panel input::placeholder {
-    font-size: 12px !important;
-}
-
-.ͼ2 .cm-panels,
-.ͼ2 .cm-side-panels {
-    background-color: var(--secondary-background-colour);
-    /*border-color: var(--primary-border-colour);*/
-    color: var(--primary-font-colour);
-    border-bottom: 1px solid var(--primary-border-colour);
-}
-
-.cm-status-bar {
-    font-family: var(--fixed-width-font-family);
-    font-weight: normal;
-    font-size: 8pt;
-    /*0 5px for desktop*/
-    margin: 5px 15px;
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.cm-status-bar i {
-    font-size: 12pt;
-    vertical-align: middle;
-    margin-left: 8px;
-}
-.cm-status-bar>div>span:first-child i {
-    margin-left: 0;
-}
-
-.cm-status-bar .disabled {
-    background-color: unset !important;
-    cursor: not-allowed;
-}
-
-/* Dropup Button */
-.cm-status-bar-select-btn {
-    border: none;
-    cursor: pointer;
-}
-
-/* The container <div> - needed to position the dropup content */
-.cm-status-bar-select {
-    position: relative;
-    display: inline-block;
-}
-
-/* Dropup content (Hidden by Default) */
-.cm-status-bar-select-content {
-    display: none;
-    position: absolute;
-    bottom: 20px;
-    right: 0;
-    background-color: #f1f1f1;
-    min-width: 200px;
-    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
-    z-index: 1;
-}
-
-/* Links inside the dropup */
-.cm-status-bar-select-content a {
-    color: black;
-    padding: 2px 5px;
-    text-decoration: none;
-    display: block;
-}
-
-/* Change color of dropup links on hover */
-.cm-status-bar-select-content a:hover {
-    background-color: #ddd
-}
-
-/* Change the background color of the dropup button when the dropup content is shown */
-.cm-status-bar-select:hover .cm-status-bar-select-btn {
-    background-color: #f1f1f1;
-}
-
-/* The search field */
-.cm-status-bar-filter-input {
-    box-sizing: border-box;
-    font-size: 12px;
-    padding-left: 10px !important;
-    border: none;
-}
-
-.cm-status-bar-filter-search {
-    border-top: 1px solid #ddd;
-}
-
-/* Show the dropup menu */
-.cm-status-bar-select .show {
-    display: block;
-}
-
-.cm-status-bar-select-scroll {
-    overflow-y: auto;
-    max-height: 300px;
-}
-
-.chr-enc-value {
-    max-width: 150px;
-    display: inline-block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    vertical-align: middle;
-}
-
-
-/* File details panel */
-
-.cm-file-details {
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    overflow-y: auto;
-    padding-bottom: 21px;
-    height: 100%;
-}
-
-.file-details-toggle-shown,
-.file-details-toggle-hidden {
-    width: 8px;
-    height: 40px;
-    border: 1px solid var(--secondary-border-colour);
-    position: absolute;
-    top: calc(50% - 20px);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--secondary-border-colour);
-    color: var(--subtext-font-colour);
-    z-index: 1;
-}
-
-.file-details-toggle-shown {
-    left: 0;
-    border-left: none;
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
-}
-
-.file-details-toggle-hidden {
-    left: -8px;
-    border-right: none;
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-}
-
-.file-details-toggle-shown:hover,
-.file-details-toggle-hidden:hover {
-    background-color: var(--primary-border-colour);
-    border-color: var(--primary-border-colour);
-    color: var(--primary-font-colour);
-}
-
-.file-details-heading {
-    font-weight: bold;
-    margin: 10px 0 10px 0;
-}
-
-.file-details-data {
-    text-align: left;
-    margin: 10px 2px;
-}
-
-.file-details-data td {
-    padding: 0 3px;
-    max-width: 130px;
-    min-width: 60px;
-    overflow: hidden;
-    vertical-align: top;
-    word-break: break-all;
-}
-
-.file-details-error {
-    color: #f00;
-}
-
-.file-details-thumbnail {
-    max-width: 180px;
-}
diff --git a/src/web/stylesheets/layout/_recipe.css b/src/web/stylesheets/layout/_recipe.css
index 339da074..8f251058 100755
--- a/src/web/stylesheets/layout/_recipe.css
+++ b/src/web/stylesheets/layout/_recipe.css
@@ -7,11 +7,5 @@
  */
 
 #rec-list {
-    overflow: auto;
-}
-
-#rec-list .operation {
-    color: var(--rec-list-operation-font-colour);
-    background-color: var(--rec-list-operation-bg-colour);
-    border-color: var(--rec-list-operation-border-colour);
+    overflow-y: scroll;
 }
diff --git a/src/web/stylesheets/layout/_structure.css b/src/web/stylesheets/layout/_structure.css
index 75d79c89..8e86a098 100755
--- a/src/web/stylesheets/layout/_structure.css
+++ b/src/web/stylesheets/layout/_structure.css
@@ -18,34 +18,19 @@ body {
     left: 0;
 }
 
-/*@TODO: test with keyboard popping up because that messes with the viewheight probably*/
-/*@TODO: make sure the panels are nicely divided / flex-grow to make up the full height of workspace-wrapper*/
-
 #workspace-wrapper {
-    /* The workspaces' available height minus the top banner and control element at the bottom */
     height: calc( 100vh - calc( var(--banner-height) + var(--controls-height)) );
     margin-top: var(--banner-height);
 }
 
-#operations {
-    height: auto;
-}
-
 #recipe {
-    height: 15vh;
+    height: 20vh;
 }
 
-#input,
-#output {
+#input, #output {
     height: 25vh;
 }
 
-#input .cm-scroller,
-#output .cm-scroller {
-    height: 100%;
-    overflow-y: scroll;
-}
-
 #operations .title,
 #recipe .title,
 #input .title,
@@ -54,10 +39,11 @@ body {
     justify-content: space-between;
 }
 
-/* To vertically align the title nicely in the center */
-label[for="input-text"],
-label[for="output-text"] {
-    line-height: revert;
+#controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
 }
 
 @media only screen and ( min-width: 768px ) {
diff --git a/src/web/todo.txt b/src/web/todo.txt
index e69de29b..6fea8eed 100644
--- a/src/web/todo.txt
+++ b/src/web/todo.txt
@@ -0,0 +1,28 @@
+temporary file to list todos to keep oversight
+
+desktop UI:
+- restore desktop UI
+
+mobile UI:
+- initial favourites icon in operations should be hidden until the dropdown is opened
+- bootstrap native 'x' in input[type="search"] should clear input value and
+  then display categories rather than close the entire dropdown
+- test with keyboard popping up because that messes with the viewheights on mobile probably
+- make sure panels in workspace-wrapper grow and add up to 100%
+
+general ui:
+- fix up key events so UI can be navigated comfortably with keys ( inc. visual focus feedback )
+
+js:
+- core/Recipe.mjs:
+- core/lib/Magic.js:
+  // @TODO: return import to original? ( it breaks dev though )
+- waiters/OperationsWaiter.mjs:
+  // @TODO: isVisible is pretty generic so probably move it ( to manager? )
+- App.mjs:
+  // @TODO: in setup, add a window resize listener for responsive functions
+
+misc:
+- write / complete UI tests
+- delete this file when done :)
+