Add scrollbar to list pages.

www/css/main.css

@@ -101,6 +101,14 @@ main{
 
     background-color:#202020;
 }
+main>div.box {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    flex-grow: 1;
+    overflow-y: scroll;
+}
 
 main>nav{
     display:flex;

www/css/ui.css

@@ -1,15 +1,15 @@
-main>table.list{
+main table.list{
     width:100%;
     border-collapse:collapse;
 }
-main>table.list tr{
+main table.list tr{
     height:2.5rem;
     background-color:#242424;
 }
-main>table.list tr:nth-child(odd){
+main table.list tr:nth-child(odd){
     background-color:#262626;
 }
-main>table.list th{
+main table.list th{
     width:1px;
     padding:0 2rem 0 2rem;
 
@@ -22,7 +22,7 @@ main>table.list th{
     color:#f0f0f0;
     border-bottom:1px solid #404040;
 }
-main>table.list td{
+main table.list td{
     width:1px;
     height:100%;
     padding:0 2rem 0 2rem;
@@ -34,24 +34,24 @@ main>table.list td{
     color:#f0f0f0;
     border-right: 1px solid #282828;
 }
-main>table.list td:last-child, main>table.list th:last-child{
+main table.list td:last-child, main table.list th:last-child{
     width:auto;
     padding:0;
     text-align:left;
 }
-main>table.list td:last-child{
+main table.list td:last-child{
     background-color: #282828;
     border:0;
 }
 
-main>table.list.session th:nth-child(1){width:10rem;}
+main table.list.session th:nth-child(1){width:10rem;}
-main>table.list.session th:nth-child(2){width:10rem;}
+main table.list.session th:nth-child(2){width:10rem;}
 
-main>table.list.session-resume th:nth-child(1){width:10rem;}
+main table.list.session-resume th:nth-child(1){width:10rem;}
 
-main>table.list.challenge th:nth-child(2){width:10rem;}
+main table.list.challenge th:nth-child(2){width:10rem;}
 
-main>table.list td:last-child>button{
+main table.list td:last-child>button{
     display:inline-block;
     position:relative;
     min-width:8rem;
@@ -67,14 +67,14 @@ main>table.list td:last-child>button{
     border:0;
     outline:0;
 }
-main>table.list td:last-child>button.highlight {
+main table.list td:last-child>button.highlight {
     background-color:#772d43;
 }
-main>table.list td:last-child>button:hover{
+main table.list td:last-child>button:hover{
     background-color:#303030;
 }
 
-main>table.list td>canvas {
+main table.list td>canvas {
     display: block;
     position: relative;
     width: 8em;
@@ -82,7 +82,7 @@ main>table.list td>canvas {
     margin: 0 -1.5rem 0 -1.5rem;
 }
 
-main>article{
+main article{
     display:block;
     position:relative;
     width:100%;
@@ -97,7 +97,7 @@ main>article{
 
     overflow:auto;
 }
-main>article>h1{
+main article>h1{
     padding:0.5rem;
     margin:0 0 0.5rem 0;
 
@@ -106,7 +106,7 @@ main>article>h1{
     background-color:#a0a0a0;
     color:#202020;
 }
-main>article>h2{
+main article>h2{
     padding:0 0 0.5rem 0.25rem;
     margin:1.5rem 0 0.5rem 0;
 
@@ -115,7 +115,7 @@ main>article>h2{
     border-bottom:2px solid #c0c0c0;
     color:#c0c0c0;
 }
-main>article>h3{
+main article>h3{
     padding:0 0 0 0.25rem;
     margin:1.5rem 0 0.5rem 0;
 
@@ -124,7 +124,7 @@ main>article>h3{
     text-decoration:underline;
     color:#b0b0b0;
 }
-main>article>h4{
+main article>h4{
     padding:0 0 0 0.25rem;
     margin:1.5rem 0 0.5rem 0;
 
@@ -132,18 +132,18 @@ main>article>h4{
     text-decoration:underline;
     color:#a0a0a0;
 }
-main>article>p{
+main article>p{
     padding:0 0.5rem 0 0.5rem;
 }
-main>article a{
+main article a{
     color:#db758e;
     text-decoration:none;
 }
-main>article>a:hover{
+main article>a:hover{
     text-decoration:underline;
 }
 
-main>div.turn-slider-padding{
+main div.turn-slider-padding{
     display:block;
     position:relative;
     width:100%;

www/js/scene.js

@@ -256,7 +256,7 @@ const SCENES = {
                 let table = document.createElement("table");
                 table.setAttribute("id", "content");
                 table.setAttribute("class", "list session");
-                MAIN.appendChild(table);
+                UI.maincontent(table);
 
                 SCENE.refresh();
 
@@ -320,7 +320,7 @@ const SCENES = {
             let table = document.createElement("table");
             table.setAttribute("id", "content");
             table.setAttribute("class", "list session-resume");
-            MAIN.appendChild(table);
+            UI.maincontent(table);
 
             SCENE.refresh();
 
@@ -435,7 +435,7 @@ const SCENES = {
             let table = document.createElement("table");
             table.setAttribute("id", "content");
             table.setAttribute("class", "list session");
-            MAIN.appendChild(table);
+            UI.maincontent(table);
 
             SCENE.refresh();
 
@@ -494,7 +494,7 @@ const SCENES = {
             let table = document.createElement("table");
             table.setAttribute("id", "content");
             table.setAttribute("class", "list session");
-            MAIN.appendChild(table);
+            UI.maincontent(table);
 
             SCENE.refresh();
 
@@ -534,7 +534,7 @@ const SCENES = {
 
             let body = document.createElement("article");
             body.setAttribute("id", "article");
-            MAIN.appendChild(body);
+            UI.maincontent(body);
 
             this.refresh("game.html");
 
@@ -562,7 +562,7 @@ const SCENES = {
 
             let body = document.createElement("article");
             body.setAttribute("id", "article");
-            MAIN.appendChild(body);
+            UI.maincontent(body);
             
             this.refresh("main.html");
 

www/js/ui.js

@@ -80,6 +80,13 @@ const UI = {
         return div;
     },
 
+    maincontent(element) {
+        let box = document.createElement("div");
+        box.setAttribute("class", "box");
+        box.appendChild(element);
+        MAIN.appendChild(box);
+    },
+
     table_content(header, rows) {
         let tbody = document.createElement("tbody");