fixed scrolling and table column padding/spacing

trivia/static/script.js

@@ -14,11 +14,11 @@ let REFRESH_TIMEOUT;
 function ScrollOnce(autoscroll) {
     // If autoscroll has been disabled in between timer, this if statement will prevent it from executing.
     if (AUTOSCROLL)
-        $(".team-row:first").appendTo("tbody")
+        $(".ui-row:first").appendTo("tbody")
 
     // Restart autoscroll as needed.
     if (autoscroll && AUTOSCROLL) {
-        setTimeout(function () {
+        SCROLL_TIMEOUT = setTimeout(function () {
             ScrollOnce(true)
         }, SCROLL_INTERVAL)
     }
@@ -30,9 +30,13 @@ function ToggleAutoscroll() {
     if (AUTOSCROLL) {
         $(".js-scroll-row-start").hide();
         $(".js-scroll-row-stop").show();
+
+        ScrollOnce(true);
     } else {
         $(".js-scroll-row-start").show();
         $(".js-scroll-row-stop").hide();
+
+        clearTimeout(SCROLL_TIMEOUT);
     }
 }
 

trivia/static/style.css

@@ -19,6 +19,7 @@ tr[data-row-index="0"] td { border-top: 0.25em solid #000; }
 .center { text-align: center; }
 .pointer { cursor: pointer; }
 .right { text-align: right; }
+.rank-pad { padding-left: 0.3em; padding-right: 0.2em;}
 .small-no-wrap { white-space: nowrap; width: 1%; }
 
 .callout { border: 1px solid transparent; margin-bottom: 0.5em; padding: 0.5em; }

trivia/templates/index.html

@@ -34,11 +34,11 @@
             <table class="table table-hover table-striped">
                 <thead>
                     <tr>
-                        <th>Rank</th>
-                        <th>ID</th>
+                        <th class="small-no-wrap rank-pad">Rank</th>
+                        <th class="small-no-wrap">ID</th>
                         <th>Team Name</th>
                         {% for i in range(scoreCount) %}
-                            <th>{{ i + 1 }}</th>
+                            <th class="small-no-wrap">{{ i + 1 }}</th>
                         {% endfor %}
                     </tr>
                 </thead>