Player Better

public/assets/css/style.css

@@ -13,6 +13,7 @@ body {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
+    table-layout: auto;
 }
 
 .header {
@@ -58,6 +59,45 @@ body {
     grid-area: sw;
 }
 
+.cursor-question {
+    cursor: help;
+
+    position: relative;
+    display: inline-block;
+}
+
+.cursor-question .tooltip-text {
+    visibility: hidden;
+    font: 16px tahoma, sans-serif;
+    width: 200px;
+    background-color: #0C0C0C;
+    border: 2px solid #EEEEEE;
+    color: #EEEEEE;
+    text-align: left;
+    border-radius: 6px;
+    padding: 5px;
+    padding-left: 8px;
+    padding-right: 8px;
+    z-index: 1;
+    position: absolute;
+    top: 110%;
+    left: 50%;
+    transform: translate(-50%, 20px);
+    opacity: 0;
+    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+    font-size: 14px;
+}
+
+.cursor-question:hover {
+    text-decoration: underline;
+}
+
+.cursor-question:hover .tooltip-text {
+    visibility: visible;
+    transform: translate(-50%, 0px);
+    opacity: 1;
+}
+
 .box {
     border: 2px solid #AAAAAA;
     border-radius: 16px;
@@ -69,11 +109,46 @@ body {
     justify-content: flex-start;
     text-justify: center;
     gap: 5px;
+    overflow: hidden;
+}
+
+.box table {
+    width: 100%;
+}
+
+.box tbody {
+    display: block;
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: calc((100vh - 100px) / 2 - 100px);
+}
+
+.box thead,
+.box tbody tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+}
+
+.box table td:first-child,
+.box table th:first-child {
+    width: 35px;
+    white-space: nowrap;
+}
+
+.box table thead td {
+    font-weight: bold;
+}
+
+.box table td:nth-child(2),
+.box table th:nth-child(2) {
+    width: 50px;
+    white-space: nowrap;
 }
 
 .grid-container {
     display: grid;
-    grid-template-columns: 50px, 50px;
+    grid-template-columns: 1fr 1fr;
     grid-template-rows: auto;
     grid-template-areas: 
     "header header"
@@ -287,12 +362,12 @@ a:focus {
 
 table {
     border-collapse: collapse;
-    border: 2px solid #CCCCCC;
+    border: 1px solid #CCCCCC;
 }
 
 thead {
     color: #FFFFFF;
-    border: 2px solid #CCCCCC;
+    /*border: 2px solid #CCCCCC;*/
 }
 
 thead th {