@@ -81,6 +84,7 @@ import UserListHeader from './Users/UserListHeader.vue'
import UserRow from './Users/UserRow.vue'
import VirtualList from './Users/VirtualList.vue'
import logger from '../logger.ts'
+import { loadColumnWidths, saveColumnWidths } from '../utils/userListColumns.ts'
import { defaultQuota, unlimitedQuota } from '../utils/userUtils.ts'
const newUser = Object.freeze({
@@ -145,6 +149,7 @@ export default {
newUser: { ...newUser },
editingUser: null,
+ columnWidths: loadColumnWidths(),
}
},
@@ -162,8 +167,11 @@ export default {
},
style() {
+ const columnWidths = Object.fromEntries(Object.entries(this.columnWidths)
+ .map(([column, width]) => [`--user-list-column-${column}`, `${width}px`]))
return {
'--row-height': `${this.rowHeight}px`,
+ ...columnWidths,
}
},
@@ -277,6 +285,19 @@ export default {
this.editingUser = user
},
+ onColumnResize(column, width) {
+ this.$set(this.columnWidths, column, width)
+ },
+
+ onColumnResizeEnd() {
+ saveColumnWidths(this.columnWidths)
+ },
+
+ onColumnReset(column) {
+ this.$delete(this.columnWidths, column)
+ saveColumnWidths(this.columnWidths)
+ },
+
async handleScrollEnd() {
await this.loadUsers()
},
diff --git a/apps/settings/src/components/Users/UserColumnResizer.spec.ts b/apps/settings/src/components/Users/UserColumnResizer.spec.ts
new file mode 100644
index 0000000000000..30de3c4f24865
--- /dev/null
+++ b/apps/settings/src/components/Users/UserColumnResizer.spec.ts
@@ -0,0 +1,97 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import UserColumnResizer from './UserColumnResizer.vue'
+import { COLUMN_MIN_WIDTH, COLUMN_RESIZE_STEP } from '../../utils/userListColumns.ts'
+
+const CELL_WIDTH = 300
+
+// jsdom has no PointerEvent and wrapper.trigger() cannot set the read-only
+// clientX, so dispatch a MouseEvent carrying the pointer event type instead
+function firePointerEvent(element: Element, type: string, clientX: number) {
+ element.dispatchEvent(new MouseEvent(type, { bubbles: true, clientX }))
+}
+
+function mountInHeaderCell() {
+ const wrapper = mount({
+ components: { UserColumnResizer },
+ template: `
+
+ `,
+ })
+ wrapper.find('th').element.getBoundingClientRect = () => ({ width: CELL_WIDTH } as DOMRect)
+ return wrapper
+}
+
+describe('UserColumnResizer', () => {
+ it('widens the column with the right arrow key', async () => {
+ const wrapper = mountInHeaderCell()
+ const resizer = wrapper.findComponent(UserColumnResizer)
+
+ await resizer.trigger('keydown', { key: 'ArrowRight' })
+
+ expect(resizer.emitted('resize')).toEqual([[CELL_WIDTH + COLUMN_RESIZE_STEP]])
+ expect(resizer.emitted('resize-end')).toHaveLength(1)
+ })
+
+ it('narrows the column with the left arrow key', async () => {
+ const wrapper = mountInHeaderCell()
+ const resizer = wrapper.findComponent(UserColumnResizer)
+
+ await resizer.trigger('keydown', { key: 'ArrowLeft' })
+
+ expect(resizer.emitted('resize')).toEqual([[CELL_WIDTH - COLUMN_RESIZE_STEP]])
+ })
+
+ it('ignores unrelated keys', async () => {
+ const wrapper = mountInHeaderCell()
+ const resizer = wrapper.findComponent(UserColumnResizer)
+
+ await resizer.trigger('keydown', { key: 'Enter' })
+
+ expect(resizer.emitted('resize')).toBeUndefined()
+ })
+
+ it('resizes on pointer drag and clamps to the minimum width', async () => {
+ const wrapper = mountInHeaderCell()
+ const resizer = wrapper.findComponent(UserColumnResizer)
+
+ firePointerEvent(resizer.element, 'pointerdown', 500)
+ firePointerEvent(resizer.element, 'pointermove', 550)
+ firePointerEvent(resizer.element, 'pointermove', 100)
+ firePointerEvent(resizer.element, 'pointerup', 100)
+ await resizer.vm.$nextTick()
+
+ expect(resizer.emitted('resize')).toEqual([[CELL_WIDTH + 50], [COLUMN_MIN_WIDTH]])
+ expect(resizer.emitted('resize-end')).toHaveLength(1)
+ })
+
+ it('does not resize on pointer move without a preceding pointer down', async () => {
+ const wrapper = mountInHeaderCell()
+ const resizer = wrapper.findComponent(UserColumnResizer)
+
+ firePointerEvent(resizer.element, 'pointermove', 550)
+ await resizer.vm.$nextTick()
+
+ expect(resizer.emitted('resize')).toBeUndefined()
+ })
+
+ it('emits a reset on double click', async () => {
+ const wrapper = mountInHeaderCell()
+ const resizer = wrapper.findComponent(UserColumnResizer)
+
+ await resizer.trigger('dblclick')
+
+ expect(resizer.emitted('reset')).toHaveLength(1)
+ })
+})
diff --git a/apps/settings/src/components/Users/UserColumnResizer.vue b/apps/settings/src/components/Users/UserColumnResizer.vue
new file mode 100644
index 0000000000000..91cc5098b7776
--- /dev/null
+++ b/apps/settings/src/components/Users/UserColumnResizer.vue
@@ -0,0 +1,128 @@
+
+
+
+
+
+
+
+
+
diff --git a/apps/settings/src/components/Users/UserListHeader.vue b/apps/settings/src/components/Users/UserListHeader.vue
index b08bb59243831..7e2361dd0a5e0 100644
--- a/apps/settings/src/components/Users/UserListHeader.vue
+++ b/apps/settings/src/components/Users/UserListHeader.vue
@@ -20,6 +20,12 @@
{{ t('settings', 'Display name') }}
+
|
+ |
@@ -50,7 +50,7 @@
|
+ class="row__cell row__cell--large row__cell--multiline row__cell--subadmins">
@@ -58,7 +58,7 @@
|
-
+ |
{{ userQuota }} ({{ usedSpace }})
{{ userLanguage.name }}
@@ -83,7 +83,7 @@
|
+ class="row__cell row__cell--large row__cell--storage">
{{ user.backend }}
{{ userFirstLogin }}
|
@@ -105,7 +105,7 @@
{{ userLastLogin }}
|
diff --git a/apps/settings/src/components/Users/shared/styles.scss b/apps/settings/src/components/Users/shared/styles.scss
index 22c85910a03f0..9374709504deb 100644
--- a/apps/settings/src/components/Users/shared/styles.scss
+++ b/apps/settings/src/components/Users/shared/styles.scss
@@ -84,6 +84,25 @@
width: var(--cell-width-groups);
}
+ // Columns whose width can be adjusted by the user, see UserColumnResizer
+ @each $column, $fallback in (
+ 'displayname': '--cell-width',
+ 'username': '--cell-width',
+ 'email': '--cell-width',
+ 'quota': '--cell-width',
+ 'first-login': '--cell-width',
+ 'last-login': '--cell-width',
+ 'groups': '--cell-width-groups',
+ 'subadmins': '--cell-width-large',
+ 'languages': '--cell-width-large',
+ 'storage': '--cell-width-large',
+ ) {
+ &--#{$column} {
+ min-width: var(--user-list-column-#{$column}, var(#{$fallback}));
+ width: var(--user-list-column-#{$column}, var(#{$fallback}));
+ }
+ }
+
&--obfuscated {
min-width: 400px;
width: 400px;
diff --git a/apps/settings/src/utils/userListColumns.spec.ts b/apps/settings/src/utils/userListColumns.spec.ts
new file mode 100644
index 0000000000000..465b2e6a5dfd8
--- /dev/null
+++ b/apps/settings/src/utils/userListColumns.spec.ts
@@ -0,0 +1,64 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { beforeEach, describe, expect, it } from 'vitest'
+import {
+ clampColumnWidth,
+ COLUMN_MAX_WIDTH,
+ COLUMN_MIN_WIDTH,
+ loadColumnWidths,
+ saveColumnWidths,
+} from './userListColumns.ts'
+
+const STORAGE_KEY = 'settings:accounts-list:column-widths'
+
+describe('clampColumnWidth', () => {
+ it('keeps values within bounds', () => {
+ expect(clampColumnWidth(250)).toBe(250)
+ })
+
+ it('clamps values below the minimum', () => {
+ expect(clampColumnWidth(1)).toBe(COLUMN_MIN_WIDTH)
+ })
+
+ it('clamps values above the maximum', () => {
+ expect(clampColumnWidth(99999)).toBe(COLUMN_MAX_WIDTH)
+ })
+
+ it('rounds fractional values', () => {
+ expect(clampColumnWidth(250.4)).toBe(250)
+ expect(clampColumnWidth(250.6)).toBe(251)
+ })
+})
+
+describe('loadColumnWidths and saveColumnWidths', () => {
+ beforeEach(() => {
+ window.localStorage.clear()
+ })
+
+ it('returns an empty object when nothing is stored', () => {
+ expect(loadColumnWidths()).toEqual({})
+ })
+
+ it('round-trips stored widths', () => {
+ saveColumnWidths({ email: 250, groups: 500 })
+ expect(loadColumnWidths()).toEqual({ email: 250, groups: 500 })
+ })
+
+ it('returns an empty object on invalid JSON', () => {
+ window.localStorage.setItem(STORAGE_KEY, 'not json')
+ expect(loadColumnWidths()).toEqual({})
+ })
+
+ it('drops non numeric values', () => {
+ window.localStorage.setItem(STORAGE_KEY, JSON.stringify({ email: 'wide', quota: null, groups: 300 }))
+ expect(loadColumnWidths()).toEqual({ groups: 300 })
+ })
+
+ it('clamps out of range stored values', () => {
+ window.localStorage.setItem(STORAGE_KEY, JSON.stringify({ email: 1, groups: 99999 }))
+ expect(loadColumnWidths()).toEqual({ email: COLUMN_MIN_WIDTH, groups: COLUMN_MAX_WIDTH })
+ })
+})
diff --git a/apps/settings/src/utils/userListColumns.ts b/apps/settings/src/utils/userListColumns.ts
new file mode 100644
index 0000000000000..89bb0e280bcc9
--- /dev/null
+++ b/apps/settings/src/utils/userListColumns.ts
@@ -0,0 +1,33 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+const STORAGE_KEY = 'settings:accounts-list:column-widths'
+
+export const COLUMN_MIN_WIDTH = 100
+export const COLUMN_MAX_WIDTH = 1000
+export const COLUMN_RESIZE_STEP = 16
+
+export function clampColumnWidth(width: number): number {
+ return Math.min(Math.max(Math.round(width), COLUMN_MIN_WIDTH), COLUMN_MAX_WIDTH)
+}
+
+export function loadColumnWidths(): Record {
+ try {
+ const stored = JSON.parse(window.localStorage.getItem(STORAGE_KEY) ?? '{}')
+ const widths: Record = {}
+ for (const [column, width] of Object.entries(stored)) {
+ if (typeof width === 'number' && Number.isFinite(width)) {
+ widths[column] = clampColumnWidth(width)
+ }
+ }
+ return widths
+ } catch {
+ return {}
+ }
+}
+
+export function saveColumnWidths(widths: Record): void {
+ window.localStorage.setItem(STORAGE_KEY, JSON.stringify(widths))
+}
|