Display scrollbar in recordings table when needed

scripts/system/html/css/record.css

@@ -11,6 +11,7 @@
 
 body {
     padding: 0;
+    overflow: hidden;
 }
 
 .title {
@@ -26,27 +27,51 @@ body {
 
 #recordings {
     height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    padding: 63px 21px 158px 21px;
+    position: relative;
     box-sizing: border-box;
+    padding: 48px 0 214px 0;
+    margin: 0 21px 0 21px;
+}
+
+#recordings #table-container {
+    height: 100%;
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    box-sizing: border-box;
+    border-left: 2px solid #575757;
+    border-right: 2px solid #575757;
+    background-color: #2e2e2e;
 }
 
 #recordings table {
-    height: 100%;
-    table-layout: fixed;
-    background: none !important;
+    border: none;
 }
 
-#recordings thead, #recordings thead tr {
-    background: none !important;
+#recordings thead {
+    position: absolute;
+    top: 19px;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    border: 2px solid #575757;
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+    border-bottom: 1px solid #575757;
+    position: absolute;
+    word-wrap: nowrap;
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 #recordings table col#unload-column {
     width: 100px;
 }
 
+#recordings thead th:last-child {
+    width: 100px;
+}
+
 #recordings table td {
     text-overflow: ellipsis;
 }
@@ -57,16 +82,34 @@ body {
 
 #recordings tbody tr.filler td {
     height: auto;
-    background-color: #2e2e2e;
     border-top: 1px solid #1c1c1c;
 }
 
-
 #recordings-list tr td:last-child span {
     font-family: HiFi-Glyphs;
     font-size: 24px;
     height: 24px;
-    display: inline-block;
+}
+
+#recordings tfoot {
+    position: absolute;
+    bottom: 189px;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    border: 2px solid #575757;
+    border-bottom-left-radius: 7px;
+    border-bottom-right-radius: 7px;
+    border-top: 1px solid #575757;
+}
+
+#recordings tfoot tr, #recordings tfoot td {
+    background: none;
+}
+
+#recordings #load-container {
+    position: relative;
+    top: 25px;
 }
 
 

scripts/system/html/js/record.js

@@ -16,7 +16,7 @@ var isUsingToolbar = false,
     numberOfPlayers = 0,
     recordingsBeingPlayed = [],
     elRecordings,
-    elRecordingsPlaying,
+    elRecordingsTable,
     elRecordingsList,
     elInstructions,
     elPlayersUnused,
@@ -61,6 +61,8 @@ function updateRecordings() {
         td,
         span,
         input,
+        ths,
+        tds,
         length,
         i,
         HIFI_GLYPH_CLOSE_SMALL = "C";
@@ -105,8 +107,16 @@ function updateRecordings() {
     tr.appendChild(td);
     tbody.appendChild(tr);
 
-    elRecordingsPlaying.replaceChild(tbody, elRecordingsList);
+    // Update table content.
+    elRecordingsTable.replaceChild(tbody, elRecordingsList);
     elRecordingsList = document.getElementById("recordings-list");
+
+    // Update header cell widths to match content widths.
+    ths = document.querySelectorAll("#recordings-table thead th");
+    tds = document.querySelectorAll("#recordings-table tbody tr:first-child td");
+    for (i = 0; i < ths.length; i += 1) {
+        ths[i].width = tds[i].offsetWidth;
+    }
 }
 
 function updateInstructions() {
@@ -251,7 +261,7 @@ function onBodyLoaded() {
 
     elRecordings = document.getElementById("recordings");
 
-    elRecordingsPlaying = document.getElementById("recordings-playing");
+    elRecordingsTable = document.getElementById("recordings-table");
     elRecordingsList = document.getElementById("recordings-list");
     elInstructions = document.getElementById("instructions");
     elPlayersUnused = document.getElementById("players-unused");

scripts/system/html/record.html

@@ -21,8 +21,8 @@
         </div>
         <hr />
         <div id="recordings">
-            <div>
-                <table id="recordings-playing">
+            <div id="table-container">
+                <table id="recordings-table">
                     <colgroup>
                         <col />
                         <col id="unload-column" />
@@ -58,7 +58,7 @@
                     </tfoot>
                 </table>
             </div>
-            <div>
+            <div id="load-container">
                 <input id="load-button" type="button" value="Load" disabled />
             </div>
         </div>