"Modified" file browser column should be "Last Modified" when there is enough space to display

[jtpio]

Description

This affects Notebook 7 downstream: jupyter/notebook#7333 (comment)

In Notebook 7 there is plenty of space to display the full "Last Modified". Also it would be better to keep "Last Modified" in Notebook 7 for parity with the classic notebook, at least for now.

Reproduce

Available in 4.2.0b2.

Currently defined here in the code base:

jupyterlab/packages/filebrowser/src/listing.ts

Line 2371 in c2c8f34

const modified = this.createHeaderItemNode(trans.__('Modified'));

Expected behavior

The column should say "Last Modified" when the file browser is displayed on the whole page.

There could be the same logic as the column content to reduce it to just "Modified" when the file browser width is smaller.

Context

Reported in:

• Update to JupyterLab 4.2.0rc0 jupyter/notebook#7333 (comment)
• https://github.com/jupyterlab/jupyterlab/pull/15948/files#r1571900809

[jtpio]

There could be the same logic as the column content to reduce it to just "Modified" when the file browser width is smaller.

@JasonWeill @krassowski I didn't have time to review #15948 before it got merged, but was expecting the logic would make the header shorter only when necessary, like for the column content.

Adding as release blocker so we have a chance to look into this.

[krassowski]

What would be the right threshold? I think it should be different from the thresholds used for the column content, maybe something on the order of 400-500px?

[jtpio]

maybe something on the order of 400-500px?

Sounds good. The use case is mostly for displaying the file browser on the full page on desktop, which is usually more than these numbers. And it would be fine if it gets shorten to "Modified" on mobile for example.

[krassowski]

@JasonWeill do you have time to pick it up?

[JasonWeill]

I can take a look at this.

[JasonWeill]

@jtpio @krassowski I've been looking into this, connecting the onResize handler to a function that measures the header element's size. This correctly assigns "Modified" and "Last Modified" on resize, but on initial load, only the header that's specified in populateHeaderNode gets used. Inside of populateHeaderNode, there isn't enough information available to discern how wide the header node would be before it is added to the DOM.

In an earlier version of #15948, I was using container queries to display one of three different timestamps for each file. This was a burden for performance, since every file listing had to have three modified timestamps. Because there's only one column header for the modified column, would it be OK to render the column header twice, and then use CSS rules to render only one of them if the header is >= or < 300 px?

[JasonWeill]

PR #16207 uses the container queries approach, not a JS/TS approach, to fix this bug. I included a wide layout in JupyterLab in the pull request, but I'm not sure whether this would be suitable for Notebook. I'd appreciate if you could take a look!