furst/AdminAnalytics
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compact compensation table on phones and add scroll hint

Browse source 
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
This commit is contained in:
emfurst 2026-10-18 05:53:07 -04:00
commit ffadcf2b10
1 changed files with 32 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/admin_analytics/dashboard/assets/style.css
View file

@ -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;