diff --git a/src/views/html.ts b/src/views/html.ts
index c65103d7..287d5827 100644
--- a/src/views/html.ts
+++ b/src/views/html.ts
@@ -5,7 +5,8 @@ export function getHeader(options: { withCollapsed?: boolean } = {}): string {
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
     #resultset {
-      height: 100%;
+      max-height: 100vh;
+      overflow: auto;
       font-size: 0.9em;
       font-family: sans-serif;
       min-width: 100%;
@@ -14,7 +15,8 @@ export function getHeader(options: { withCollapsed?: boolean } = {}): string {
     }
 
     .header {
-      background-color: var(--vscode-banner-background);
+      background-color: var(--vscode-editor-background);
+      background-image: linear-gradient(var(--vscode-banner-background), var(--vscode-banner-background));
       color: var(--vscode-banner-foreground);
       text-align: left;
       position: sticky; /* Lock the header row to the top so it's always visible as rows are scrolled */
diff --git a/src/views/results/html.ts b/src/views/results/html.ts
index 6a193cc7..3ddc8953 100644
--- a/src/views/results/html.ts
+++ b/src/views/results/html.ts
@@ -474,7 +474,7 @@ export function generateScroller(uiId: string, basicSelect: string, parameters:
             let i = 0;
             let adjustingColumn = undefined;
             const resultSetDiv = document.getElementById(htmlTableId);
-            const footerDiv = document.getElementById(footerId);
+            const messageSpanEl = document.getElementById(messageSpanId);
             columnMetaData.forEach(column => {
               const cell = document.createElement("div");
               const col = i++;
@@ -508,7 +508,7 @@ export function generateScroller(uiId: string, basicSelect: string, parameters:
                 resultSetDiv.style["grid-template-columns"] = columnTemplates.join(' ');
               });
               cell.appendChild(grip);
-              footerDiv.before(cell);
+              messageSpanEl.before(cell);
               columnTemplate += ' max-content';
               ${withCollapsed?
               `resultSetDiv.style.setProperty('--col-'+col,'200px');
@@ -540,7 +540,7 @@ export function generateScroller(uiId: string, basicSelect: string, parameters:
           }
 
           function appendRows(rows) {
-            const footerDiv = document.getElementById(footerId);
+            const messageSpanEl = document.getElementById(messageSpanId);
 
             for (const row of rows) {
               // Insert a row at the end of table
@@ -591,7 +591,7 @@ export function generateScroller(uiId: string, basicSelect: string, parameters:
                 rowDiv.appendChild(newCell);
                 currentColumn += 1;
               }
-              footerDiv.before(rowDiv);
+              messageSpanEl.before(rowDiv);
             }
           }
 
@@ -665,6 +665,7 @@ export function generateScroller(uiId: string, basicSelect: string, parameters:
       </head>
       <body style="padding: 0;">
         <div id="resultset">
+          <p style="padding-left: 20px; grid-column: 1 / -1;" id="messageSpan"></p>
           <div id="footer">
             <div id="updateMessage"></div>
             <div id="footer2">
@@ -673,7 +674,6 @@ export function generateScroller(uiId: string, basicSelect: string, parameters:
             </div>
           </div>
         </div>
-        <p style="padding-left: 20px;" id="messageSpan"></p>
         <div id="spinnerContent" class="center-screen">
           <p id="loadingText">Running statement</p>
           <span class="loader"></span>