Fix Recent Activity table collapsing FILE column on narrow screens (#217)

[DeLo1585]

Fixes #217.

On narrow screens (phone in portrait, high browser zoom) the Recent Activity table's FILE column collapsed to ~0px: the four fixed-width columns add up to 500px, and word-break: break-word (alias of overflow-wrap: anywhere) plus min-width: 0 let the filename wrap one character per line and made the FILE and USERS headers overlap.

Three commits, only web/static/css/custom.css changes:

1. Core fix: min-width on the table, horizontal scroll on .recent-activity-scroll, overflow-wrap: break-word for the filename cell.
2. Optional: tighter fixed columns under a container query (card < 720px), so FILE is reachable without swiping first on a ~360px phone.
3. Optional: keep the run header (title + stat pills) sticky while the table is scrolled sideways.

Independent of #218 (different sections of the file, no conflicts). Happy to drop commits 2 and 3 if they don't hold up on other setups.

Testing

• On my own devices: phone in portrait, and desktop at 160% zoom with the sidebar expanded and collapsed.
• Additionally, before/after comparison of the old and new CSS in headless Chromium at several card widths, dark and light theme. From a card width of 720px up the rendering is unchanged.

AI assistance
The root-cause analysis, the fix, the tests in headless Chromium, the commit split and this description were done with Claude Sonnet 5.5 (Anthropic). I reviewed the result, applied the patches to a branch based on main, tested it on my own devices, pushed and opened this PR.

[DeLo1585]

Here is how I got to this fix, what I found, and why there are two optional commits.

Which commit matters

#	Commit	Status
1	Core fix: table min-width, horizontal scroll, overflow-wrap: break-word	✅ This is the fix. It resolves #217 on its own.
2	Tighter columns on narrow cards (container query)	optional, usability improvement
3	Sticky run header while scrolling sideways	optional, builds on 2

Reproduction

I rebuilt the Dashboard table in headless Chromium using the real plex-theme.css, custom.css and the table markup from dashboard.html / recent_activity.html. At 360px viewport width the FILE column came out at 0px wide and the filename cell was ~1510px tall (one character per line), with the FILE and USERS headers overlapping. That matches the phone screenshots in #217.

What was actually wrong

In my first comment on #217 I suspected that horizontal scrolling was missing. That was wrong. The table does scroll sideways, but only over the 500px taken by the four fixed columns (130 + 130 + 130 + 110px), where FILE has no width. .recent-activity-table is table-layout: fixed and FILE is the auto column, so it only gets what is left, which is 0px on a phone. On top of that .activity-file-col had word-break: break-word (an alias of overflow-wrap: anywhere) and min-width: 0, which lets the cell collapse completely. As far as I can tell, Cached Files doesn't have this problem because its table isn't table-layout: fixed and grows to its content width, with .card-body { overflow-x: auto } from plex-theme.css handling the scroll.

Commit 1: the actual fix

Important

Commit 1 is the fix. min-width: 720px on the table so FILE keeps ~220px, overflow-x: auto on .recent-activity-scroll, and overflow-wrap: break-word instead of word-break: break-word / min-width: 0 on the filename cell. At 360px the FILE cell goes from ~1510px to ~82px tall. This commit alone fixes the bug.

Commits 2 and 3: optional

Note

Both are optional and can be dropped without affecting the fix. Commit 3 depends on commit 2.

After applying commit 1 on my phone, two things were still awkward (the numbers below are from the headless test at 360px, where the card is ~311px wide). TIME and ACTION still use ~260px, so FILE only starts near the right edge and you have to swipe before you see a filename. And the run header (title on the left, "2 restored · 1.31 GB" pills on the right) spans all five columns, so the pills sit off-screen and, after swiping, the title scrolls away and the pills are left without context.

• Commit 2 uses a container query (card < 720px) with narrower fixed columns (80/96/90/100px, min-width: 520px), so FILE is much closer to the left edge. It is keyed to the card width, not the viewport, because the sidebar also takes space on desktop. I first used min-width: 560px. At 160% zoom on desktop with the sidebar expanded my card was only 533px wide, so the table overflowed by 27px and cut off the SIZE column ("222.02 M…"). With 520px scrollWidth equals the container width and nothing is clipped. Going lower (500px / 480px) would squeeze FILE on a phone to 134px / 114px, so 520px seemed the right compromise (FILE ~154px).
• Commit 3 makes the run header's inner box sticky (left offset, width: calc(100cqw - 1.5rem), flex-wrap), so title and pills stay together while the table is scrolled sideways. It uses cqw, so it depends on the container from commit 2.

Side effects I checked

• The changed selectors are only used by the Dashboard Recent Activity table (dashboard.html and the partial rendered by /operations/activity). Cached Files and the other pages don't use them.
• container-type makes the container the containing block for position: fixed descendants. The only fixed-position popup I found (associated-files hover) isn't used inside this table.
• I compared old vs. new CSS in dark and light theme: at card widths of ~900px and up the rendering is pixel-identical, and between 720px and ~900px the column widths are identical to before.
• Independent of Fix: floating operation pill stays theme-aware in Light mode (#213) #215 (already in main) and Fix: operation pill no longer overlaps UI at high zoom / on phones (#216) #218: they touch other sections of custom.css (banner/pill and header layout), and a three-way merge shows no conflicts, so the merge order doesn't matter.

Tested

Firefox And Chrom both On my phone in portrait and on desktop at 160% zoom with the sidebar expanded and collapsed, plus the headless Chromium comparisons above. I couldn't test Safari. cqw and container queries need Chrome 105+ / Firefox 110+ / Safari 16+; in older browsers only the basic rules from commit 1 apply.

The analysis, fix, tests and commit split were done with Claude Sonnet 5.5; I reviewed the result, tested it on my own devices and opened the PR.

[Brandon-Haney]

I pulled this and compared main, the first commit on its own, and all three. You were right about 2 and 3. With only the first commit the filename column is fine, but on narrow screens the run header's pills sit off-screen, and once you swipe over to them the run title is gone. With all three the header stays together and the filenames show up without swiping. Desktop widths look identical to before.

I'm happy with all three as they are.

@StudioNirin to answer your question on #217, this only touches the Recent Activity table's own CSS, so nothing else on the Dashboard or the other tables is affected. From my side it's good to merge.

[StudioNirin]

Thats fine then, all good here. @DeLo1585 if this is finalised I will merge it

[DeLo1585]

Yes, fir FIRST COMMIT is final from my side, no further changes planned. Thanks both for pulling it and testing it on your setups! Please go ahead and merge.

[StudioNirin]

Yes, fir FIRST COMMIT is final from my side, no further changes planned. Thanks both for pulling it and testing it on your setups! Please go ahead and merge.

You only want one commit merged and not the whole PR? Might be a mobile limitation but im not seeing a way to do that, seems to be all or nothing (I dont use git a whole lot).

[DeLo1585]

Sorry for the confusion, that was a slip in my wording. Please merge the whole PR (all three commits). Brandon tested and approved all three, and I have no further changes planned. Thanks!