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

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;