Refactor renderShiftTimetable to enhance list view with date, week, and day headers, and improve worker assignment display with color coding for selected shifts.

output/timetable.css

@@ -38,7 +38,7 @@ table {
     padding: 0;
 }
 
-.table-div th {
+#main-table th {
     text-align: center;
     white-space: nowrap;
     transform: rotate(90deg) translateX(-100px);
@@ -47,12 +47,12 @@ table {
 
 }
 
-.table-div th p {
+#main-table th p {
     margin: 0 -100%;
     display: inline-block;
 }
 
-.table-div th p:before {
+#main-table th p:before {
     content: '';
     width: 0;
     padding-top: 110%;
@@ -61,21 +61,21 @@ table {
     vertical-align: middle;
 }
 
-.table-div td,
+#main-table td,
 th {
     max-width: 10px;
     padding: 0px;
 }
 
-.table-div tr {
+#main-table tr {
     padding: 0px;
 }
 
-.table-div tr:hover {
+#main-table tr:hover {
     background-color: lightblue;
 }
 
-.table-div tr:hover .unavailable {
+#main-table tr:hover .unavailable {
 
     background-color: lightgray;
 }
@@ -96,7 +96,7 @@ th {
 
 }
 
-th.bank-holiday {
+#main-table th.bank-holiday {
     color: darkblue;
 
 }
@@ -187,10 +187,8 @@ th.bank-holiday {
     color: lightcoral;
 }
 
-.th {}
-
-.table-div th.worker,
-.table-div td.worker {
+#main-table th.worker,
+#main-table td.worker {
     position: absolute;
     width: 200px;
     max-width: 200px;
@@ -210,7 +208,7 @@ th.bank-holiday {
     max-width: auto;
 }
 
-.header th {
+#main-table.header th {
     max-width: 200px;
 
 }
@@ -219,7 +217,7 @@ th.bank-holiday {
     border: 1px dotted orange;
 } */
 
-th.site-title {
+#main-table th.site-title {
     transform: unset;
 }
 
@@ -362,4 +360,8 @@ button.selected {
 #main-table td.force-assigned.force-assigned-highlight {
     background-color: #ffe066 !important;
     border: 2px solid #ff8800 !important;
+}
+
+#linear-shift-timetable td, #linear-shift-timetable th {
+    max-width: unset;
 }