[Files App] Responsiveness logic contradicts column priority by stripping File Type column on narrow screens
Nobody has claimed this yet.
- Dominant language
- PHP
- Stars
- 36.9k
- Forks
- 5.2k
- Avg merge
- 2d 3h
- Merged PRs (30d)
- 713
Description
[!TIP]
Help move this idea forward
- Use the 👍 reaction to show support for this feature.
- Avoid commenting unless you have relevant information to add; unnecessary comments create noise for subscribers.
- Subscribe to receive notifications about status changes and new comments.
Is your feature request related to a problem? Please describe.
Yes. In Nextcloud 34, the "File Type" (MIME type) column is forcibly unmounted from the DOM when the window width is reduced.
Because the "File Type" column is structurally positioned right next to the "File Name" column, it is naturally perceived as a high-priority piece of information. However, the responsive JavaScript logic (ResizeObserver) completely strips this element from the DOM on narrower viewports instead of retaining critical metadata or allowing a horizontal layout.
Since the DOM elements are completely removed rather than visually hidden via CSS, administrators cannot even override this behavior using Custom CSS (e.g., forcing overflow-x: auto or display: flex !important).
Describe the solution you'd like
I would like Nextcloud to handle column responsiveness more gracefully by implementing one of the following:
- Horizontal Scroll Support: Allow the table/grid container (
.files-list) to gracefully trigger horizontal scrolling (overflow-x: auto) on narrow viewports, keeping all active columns accessible without removing them from the DOM. - Smarter Column Priority Logic: Update the responsive JavaScript logic to prioritize high-value metadata (File Name & File Type) so that core contextual information is not stripped prematurely when the viewport shrinks.
Describe alternatives you've considered
- Custom CSS Overrides: Attempted to apply
overflow-x: autoand set minimum container widths via Custom CSS. This failed because the responsive script removes the target elements directly from the DOM, making CSS styling ineffective. - Column Reordering: Considered moving the "File Type" column to a different position, but Nextcloud currently lacks a native interface or layout configuration to customize column order or priorities.
Additional context
- Environment: Nextcloud 34.0.3 (Files app using the new Vue.js / Web Components UI)
- Impact: Users working on smaller laptops, tiled windows, or tablets lose immediate visibility of file formats without any option to scroll sideways to view them.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing the Files app's responsive JavaScript and its ResizeObserver behavior around the .files-list container in the Vue.js/Web Components UI. Compare horizontal scrolling with smarter column-priority handling, and verify that the File Type column remains accessible on narrow viewports without being removed from the DOM.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100