Skip to content

feat(settings): allow resizing the columns of the accounts list#62066

Draft
Fantu wants to merge 2 commits into
nextcloud:masterfrom
M2Rbiz:feat/users-list-resizable-columns
Draft

feat(settings): allow resizing the columns of the accounts list#62066
Fantu wants to merge 2 commits into
nextcloud:masterfrom
M2Rbiz:feat/users-list-resizable-columns

Conversation

@Fantu

@Fantu Fantu commented Jul 13, 2026

Copy link
Copy Markdown

Summary

The accounts list columns have a fixed width since the Nextcloud 28 table rework (#39050): before that the columns were fluid and grew with the available space, since then long values (display names, emails, LDAP account names, translated quota strings, storage paths) are always ellipsised, with no way to see or copy them from the list. As an admin of an LDAP-backed server this bites me regularly: the internal account names are UUIDs and I cannot see or copy them (see also #54072).

This PR adds a resize handle to each column header:

  • drag to resize (mouse/touch, RTL aware)
  • arrow keys as keyboard alternative (the handle is focusable, role="separator" with an aria-label)
  • double click to reset the column to its default width
  • widths are clamped to sane bounds, applied through per-column CSS variables on the list container so header, rows and footer always stay aligned, and persisted in localStorage

Screenshots

Before After (account name column widened)
resize-before resize-after

How to test

  1. Go to Settings → Accounts (ideally with accounts having long display names / account names / emails)
  2. Hover the end of a column header: a resize handle appears
  3. Drag it (or focus it and use the arrow keys) to resize the column
  4. Reload the page: the width is remembered
  5. Double click the handle: the column is back to its default width

Notes for reviewers (draft)

  • Compiled assets are intentionally not included while in draft; I will add them (or ask for /compile) once the approach is settled.
  • Open questions where I'd like design/team input:
    • persistence: should the widths go to the server side user preferences like the show/hide column toggles (/settings/users/preferences/*, ConfigLexicon), or is localStorage fine here given that pixel widths are display dependent (a width that fits an external monitor may not fit a laptop)?
    • handle affordance: currently a 2px accent line shown on hover/focus — happy to adjust to design guidelines
    • I think a permanent subtle column separator on every resizable column (like the existing one after the display name column) would make the resize handles discoverable; should I add it?
    • anything more needed on the a11y side (e.g. aria-valuenow on the separator)?

TODO

  • ...

Checklist

AI (if applicable)

  • The content of this PR was partly or fully generated using AI

The accounts list columns have a fixed width: long values (display
names, emails, LDAP account names, translated quota strings, storage
paths) are ellipsised with no way to see or copy them from the list.
This is a usability regression from the Nextcloud 28 table rework
(nextcloud#39050): until then the columns were fluid and grew with the available
space.

Add a resize handle to each column header: drag to resize, arrow keys as
keyboard alternative, double click to reset. Widths are clamped to sane
bounds, applied through per-column CSS variables on the list container
so header, rows and footer stay aligned, and persisted in localStorage.

Closes nextcloud#43777

Assisted-by: ClaudeCode:claude-fable-5
Signed-off-by: Fabio Fantoni <fabio.fantoni@m2r.biz>
Comment thread apps/settings/src/components/Users/UserColumnResizer.vue Outdated
@Fantu

Fantu commented Jul 14, 2026

Copy link
Copy Markdown
Author

@CarlSchwan thanks for the review.
Regarding the questions for reviewers, can you please answer at least the question of the visible separator on the columns (like the first)? I'd like to add it, but I haven't done so because it gives me the impression, looking at the interface in general (including other pages), that the nc team want to have a more "minimal" graphic style (as I unfortunately see increasingly "as fashion" in recent s.o. DE and programs, to the detriment of usability :( ).

Convert the component from Options API (Vue.extend) to script setup, as
requested in review. No behavior change: props, emitted events, rendered
markup and styles stay the same, and the existing unit tests pass
unmodified. The cell width is now read through a template ref on the
handle instead of this.$el.
Add short JSDoc comments to the extracted functions: the
jsdoc/require-jsdoc eslint rule applies to top-level functions in script
setup, while it did not to Options API methods.

Assisted-by: ClaudeCode:claude-fable-5
Signed-off-by: Fabio Fantoni <fabio.fantoni@m2r.biz>
@susnux susnux added the community pull requests from community label Jul 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

community pull requests from community

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Allow resizing of the columns in the "users" view

3 participants