diff --git a/src/web/html/index.html b/src/web/html/index.html
index 9cf3e878..f30636dd 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -324,7 +324,7 @@
                             <div class="textarea-wrapper">
                                 <div id="output-text"></div>
                                 <img id="show-file-overlay" aria-hidden="true" src="<%- require('../static/images/file-32x32.png') %>" alt="Show file overlay" title="Show file overlay"/>
-                                <div id="output-file">
+                                <div id="output-file"> <!-- TODO - is this still a thing? -->
                                     <div class="file-overlay"></div>
                                     <div style="position: relative; height: 100%;">
                                         <div class="io-card card">
diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css
index 9c64fe85..bd705056 100755
--- a/src/web/stylesheets/layout/_io.css
+++ b/src/web/stylesheets/layout/_io.css
@@ -188,10 +188,11 @@
     bottom: 0;
     left: 0;
     width: 100%;
+    height: 100%;
     margin: 0;
-    background-color: var(--primary-background-colour);
-    visibility: hidden;
+    background-color: var(--secondary-background-colour);
     opacity: 0;
+    visibility: hidden;
     display: flex;
     justify-content: center;
     align-items: center;