From ffadcf2b1085cacaa665667b8b36b2159e488d59 Mon Sep 17 00:00:00 2001
From: emfurst <furst@udel.edu>
Date: Sun, 18 Oct 2026 05:53:07 -0400
Subject: [PATCH] Compact compensation table on phones and add scroll hint

On narrow screens, hide the Role column and wrap Title to 140px so the
pay columns are one short swipe away instead of ~2.5 screens. Fade the
right edge of data tables with a mask (fixed to the box, so it stays put
while swiping) and pad the last column so the fade never covers it.
Desktop layout is unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01X9jG4CUFcH6n4vFvgtwndY
---
 .../dashboard/assets/style.css                | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/admin_analytics/dashboard/assets/style.css b/src/admin_analytics/dashboard/assets/style.css
index 90cec0a..ba140a7 100644
--- a/src/admin_analytics/dashboard/assets/style.css
+++ b/src/admin_analytics/dashboard/assets/style.css
@@ -144,6 +144,38 @@ body {
         font-size: 1.3rem;
     }
 
+    /* Compensation table: drop Role (it mostly restates Title) and wrap
+       Title so the pay columns sit about one swipe away. */
+    #comp-table [data-dash-column="canonical_role"] {
+        display: none;
+    }
+
+    #comp-table td[data-dash-column="title"],
+    #comp-table th[data-dash-column="title"] {
+        min-width: 140px !important;
+        max-width: 140px !important;
+        width: 140px !important;
+    }
+
+    #comp-table td[data-dash-column="title"] .dash-cell-value {
+        white-space: normal !important;
+        overflow-wrap: anywhere;
+    }
+
+    /* Scroll hint: fade the right edge of every data table's visible area.
+       A mask is fixed to the box, not the scrolled content, so the fade
+       stays at the screen edge while swiping. Extra padding after the last
+       column means the fade covers empty space once scrolled to the end. */
+    .dash-spreadsheet-container {
+        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
+        mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
+    }
+
+    .dash-spreadsheet-container td:last-child,
+    .dash-spreadsheet-container th:last-child {
+        padding-right: 40px !important;
+    }
+
     /* Charts are view-only on phones; the toolbar overlaps titles. */
     .modebar-container {
         display: none;