Add sticky header styles and improve visibility for timetable display

output/timetable.js

@@ -466,6 +466,36 @@ renderWorkerList();
 // Column for prior-adjustment (hidden by default)
 h.append(`<th class='prior-adjust-col' style='display:none'>Prior Adjust</th>`);
 
+// Ensure header styles for visibility and stickiness are present
+if ($('#tsummary-style').length === 0) {
+    $('head').append(`
+        <style id='tsummary-style'>
+            /* Compact timetable styles */
+            table.tsummary { border-collapse: collapse; width: 100%; overflow: auto; font-size: 12px; }
+            table.tsummary th, table.tsummary td { border: 1px solid #eee; padding: 2px 4px; }
+            table.tsummary th { background: #fafafa; position: sticky; top: 0; z-index: 5; white-space: nowrap; }
+            /* Vertical headers for compact columns */
+            table.tsummary th { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); padding: 4px 2px; height: 88px; font-size: 10px; }
+            /* Keep prior-adjust column horizontal */
+            table.tsummary th.prior-adjust-col { writing-mode: horizontal-tb; transform: none; height: auto; }
+            /* Make header text readable */
+            table.tsummary th > span { display: inline-block; transform: rotate(180deg); padding: 0 2px; }
+            /* Ensure cells align under rotated headers */
+            table.tsummary td { vertical-align: middle; white-space: nowrap; max-width: 6ch; overflow: hidden; text-overflow: ellipsis; }
+
+            /* Reduce worker summary and card sizes */
+            .worker-summary { font-size: 11px; padding: 0px 6px; margin-bottom: 4px; }
+            .worker-card { padding: 6px; margin-bottom: 4px; }
+
+            /* Compact shifts/settings table */
+            table.shifts-table th, table.shifts-table td { padding: 4px 6px; font-size: 12px; }
+
+            /* Slightly thinner avoid highlight for compact layout */
+            td.rota-day.avoid-shift.avoid-highlight { border-width: 1.5px !important; box-shadow: 0 0 4px rgba(255,140,0,0.18); }
+        </style>
+    `);
+}
+
 
 
 $(".table-div .worker-row .worker").each((n, tr) => {