From bddb1ab99afdd152eb7b1ac28e3cd374caffe96d Mon Sep 17 00:00:00 2001
From: Fabio Fantoni <fabio.fantoni@m2r.biz>
Date: Mon, 13 Jul 2026 19:58:23 +0200
Subject: [PATCH 1/2] feat(settings): allow resizing the columns of the
 accounts list

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
(#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 #43777

Assisted-by: ClaudeCode:claude-fable-5
Signed-off-by: Fabio Fantoni <fabio.fantoni@m2r.biz>
---
 apps/settings/src/components/UserList.vue     |  23 +++-
 .../Users/UserColumnResizer.spec.ts           |  97 +++++++++++++
 .../components/Users/UserColumnResizer.vue    | 128 ++++++++++++++++++
 .../src/components/Users/UserListHeader.vue   |  95 ++++++++++++-
 .../settings/src/components/Users/UserRow.vue |  14 +-
 .../src/components/Users/shared/styles.scss   |  19 +++
 .../src/utils/userListColumns.spec.ts         |  64 +++++++++
 apps/settings/src/utils/userListColumns.ts    |  33 +++++
 8 files changed, 458 insertions(+), 15 deletions(-)
 create mode 100644 apps/settings/src/components/Users/UserColumnResizer.spec.ts
 create mode 100644 apps/settings/src/components/Users/UserColumnResizer.vue
 create mode 100644 apps/settings/src/utils/userListColumns.spec.ts
 create mode 100644 apps/settings/src/utils/userListColumns.ts

diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue
index 0cb78e12b0e9a..b30186a1958a5 100644
--- a/apps/settings/src/components/UserList.vue
+++ b/apps/settings/src/components/UserList.vue
@@ -55,7 +55,10 @@
 			</template>
 
 			<template #header>
-				<UserListHeader />
+				<UserListHeader
+					@resize-column="onColumnResize"
+					@resize-column-end="onColumnResizeEnd"
+					@reset-column="onColumnReset" />
 			</template>
 
 			<template #footer>
@@ -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: `
+			<table>
+				<tr>
+					<th>
+						<UserColumnResizer column="email" label="Email" />
+					</th>
+				</tr>
+			</table>
+		`,
+	})
+	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 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<span
+		class="column-resizer"
+		role="separator"
+		aria-orientation="vertical"
+		:aria-label="t('settings', 'Drag or use the arrow keys to resize the {label} column. Double click to reset its width.', { label })"
+		tabindex="0"
+		:data-cy-column-resizer="column"
+		@pointerdown.prevent="onPointerDown"
+		@pointermove="onPointerMove"
+		@pointerup="onPointerUp"
+		@pointercancel="onPointerUp"
+		@keydown="onKeydown"
+		@dblclick="$emit('reset')" />
+</template>
+
+<script lang="ts">
+import { translate as t } from '@nextcloud/l10n'
+import Vue from 'vue'
+import { clampColumnWidth, COLUMN_RESIZE_STEP } from '../../utils/userListColumns.ts'
+
+export default Vue.extend({
+	name: 'UserColumnResizer',
+
+	props: {
+		/** Column key, used as CSS variable suffix */
+		column: {
+			type: String,
+			required: true,
+		},
+
+		/** Human readable column label */
+		label: {
+			type: String,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			dragging: false,
+			startX: 0,
+			startWidth: 0,
+		}
+	},
+
+	methods: {
+		t,
+
+		cellWidth(): number {
+			const cell = (this.$el as HTMLElement).closest('th')
+			return cell?.getBoundingClientRect().width ?? 0
+		},
+
+		resizeDirection(): number {
+			return document.dir === 'rtl' ? -1 : 1
+		},
+
+		onPointerDown(event: PointerEvent) {
+			this.dragging = true
+			this.startX = event.clientX
+			this.startWidth = this.cellWidth()
+			const handle = event.target as HTMLElement
+			handle.setPointerCapture?.(event.pointerId)
+		},
+
+		onPointerMove(event: PointerEvent) {
+			if (!this.dragging) {
+				return
+			}
+			const delta = (event.clientX - this.startX) * this.resizeDirection()
+			this.$emit('resize', clampColumnWidth(this.startWidth + delta))
+		},
+
+		onPointerUp() {
+			if (!this.dragging) {
+				return
+			}
+			this.dragging = false
+			this.$emit('resize-end')
+		},
+
+		onKeydown(event: KeyboardEvent) {
+			const direction = { ArrowLeft: -1, ArrowRight: 1 }[event.key]
+			if (direction === undefined) {
+				return
+			}
+			event.preventDefault()
+			const step = direction * COLUMN_RESIZE_STEP * this.resizeDirection()
+			this.$emit('resize', clampColumnWidth(this.cellWidth() + step))
+			this.$emit('resize-end')
+		},
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.column-resizer {
+	position: absolute;
+	z-index: 2;
+	inset-block: 0;
+	inset-inline-end: 0;
+	width: calc(var(--default-grid-baseline) * 2);
+	cursor: col-resize;
+	touch-action: none;
+
+	&::after {
+		content: '';
+		position: absolute;
+		inset-block: var(--default-grid-baseline);
+		inset-inline-end: calc(var(--default-grid-baseline) / 2);
+		width: 2px;
+		border-radius: 1px;
+		background-color: var(--color-primary-element);
+		opacity: 0;
+	}
+
+	&:hover::after,
+	&:focus-visible::after {
+		opacity: 1;
+	}
+}
+</style>
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 @@
 			<strong>
 				{{ t('settings', 'Display name') }}
 			</strong>
+			<UserColumnResizer
+				column="displayname"
+				:label="t('settings', 'Display name')"
+				@resize="width => onColumnResize('displayname', width)"
+				@resize-end="$emit('resize-column-end')"
+				@reset="onColumnReset('displayname')" />
 		</th>
 		<th
 			class="header__cell header__cell--username"
@@ -28,42 +34,78 @@
 			<span>
 				{{ t('settings', 'Account name') }}
 			</span>
+			<UserColumnResizer
+				column="username"
+				:label="t('settings', 'Account name')"
+				@resize="width => onColumnResize('username', width)"
+				@resize-end="$emit('resize-column-end')"
+				@reset="onColumnReset('username')" />
 		</th>
 		<th
-			class="header__cell"
+			class="header__cell header__cell--email"
 			data-cy-user-list-header-email
 			scope="col">
 			<span>{{ t('settings', 'Email') }}</span>
+			<UserColumnResizer
+				column="email"
+				:label="t('settings', 'Email')"
+				@resize="width => onColumnResize('email', width)"
+				@resize-end="$emit('resize-column-end')"
+				@reset="onColumnReset('email')" />
 		</th>
 		<th
 			class="header__cell header__cell--groups"
 			data-cy-user-list-header-groups
 			scope="col">
 			<span>{{ t('settings', 'Groups') }}</span>
+			<UserColumnResizer
+				column="groups"
+				:label="t('settings', 'Groups')"
+				@resize="width => onColumnResize('groups', width)"
+				@resize-end="$emit('resize-column-end')"
+				@reset="onColumnReset('groups')" />
 		</th>
 		<th
 			v-if="settings.isAdmin || settings.isDelegatedAdmin"
-			class="header__cell header__cell--large"
+			class="header__cell header__cell--large header__cell--subadmins"
 			data-cy-user-list-header-subadmins
 			scope="col">
 			<span>{{ t('settings', 'Group admin for') }}</span>
+			<UserColumnResizer
+				column="subadmins"
+				:label="t('settings', 'Group admin for')"
+				@resize="width => onColumnResize('subadmins', width)"
+				@resize-end="$emit('resize-column-end')"
+				@reset="onColumnReset('subadmins')" />
 		</th>
 		<th
-			class="header__cell"
+			class="header__cell header__cell--quota"
 			data-cy-user-list-header-quota
 			scope="col">
 			<span>{{ t('settings', 'Quota') }}</span>
+			<UserColumnResizer
+				column="quota"
+				:label="t('settings', 'Quota')"
+				@resize="width => onColumnResize('quota', width)"
+				@resize-end="$emit('resize-column-end')"
+				@reset="onColumnReset('quota')" />
 		</th>
 		<th
 			v-if="showConfig.showLanguages"
-			class="header__cell header__cell--large"
+			class="header__cell header__cell--large header__cell--languages"
 			data-cy-user-list-header-languages
 			scope="col">
 			<span>{{ t('settings', 'Language') }}</span>
+			<UserColumnResizer
+				column="languages"
+				:label="t('settings', 'Language')"
+				@resize="width => onColumnResize('languages', width)"
+				@resize-end="$emit('resize-column-end')"
+				@reset="onColumnReset('languages')" />
 		</th>
 		<th
 			v-if="showConfig.showUserBackend || showConfig.showStoragePath"
-			class="header__cell header__cell--large"
+			class="header__cell header__cell--large header__cell--storage"
 			data-cy-user-list-header-storage-location
 			scope="col">
 			<span v-if="showConfig.showUserBackend">
@@ -74,20 +116,38 @@
 				class="header__subtitle">
 				{{ t('settings', 'Storage location') }}
 			</span>
+			<UserColumnResizer
+				column="storage"
+				:label="t('settings', 'Account backend')"
+				@resize="width => onColumnResize('storage', width)"
+				@resize-end="$emit('resize-column-end')"
+				@reset="onColumnReset('storage')" />
 		</th>
 		<th
 			v-if="showConfig.showFirstLogin"
-			class="header__cell"
+			class="header__cell header__cell--first-login"
 			data-cy-user-list-header-first-login
 			scope="col">
 			<span>{{ t('settings', 'First login') }}</span>
+			<UserColumnResizer
+				column="first-login"
+				:label="t('settings', 'First login')"
+				@resize="width => onColumnResize('first-login', width)"
+				@resize-end="$emit('resize-column-end')"
+				@reset="onColumnReset('first-login')" />
 		</th>
 		<th
 			v-if="showConfig.showLastLogin"
-			class="header__cell"
+			class="header__cell header__cell--last-login"
 			data-cy-user-list-header-last-login
 			scope="col">
 			<span>{{ t('settings', 'Last login') }}</span>
+			<UserColumnResizer
+				column="last-login"
+				:label="t('settings', 'Last login')"
+				@resize="width => onColumnResize('last-login', width)"
+				@resize-end="$emit('resize-column-end')"
+				@reset="onColumnReset('last-login')" />
 		</th>
 		<th
 			class="header__cell header__cell--large header__cell--fill"
@@ -110,10 +170,15 @@
 <script lang="ts">
 import { translate as t } from '@nextcloud/l10n'
 import Vue from 'vue'
+import UserColumnResizer from './UserColumnResizer.vue'
 
 export default Vue.extend({
 	name: 'UserListHeader',
 
+	components: {
+		UserColumnResizer,
+	},
+
 	computed: {
 		showConfig() {
 			// @ts-expect-error: allow untyped $store
@@ -128,6 +193,14 @@ export default Vue.extend({
 
 	methods: {
 		t,
+
+		onColumnResize(column: string, width: number) {
+			this.$emit('resize-column', column, width)
+		},
+
+		onColumnReset(column: string) {
+			this.$emit('reset-column', column)
+		},
 	},
 })
 </script>
@@ -138,6 +211,14 @@ export default Vue.extend({
 .header {
 	border-bottom: 1px solid var(--color-border);
 
+	// Positioning context for the column resize handles.
+	// Declared before the shared styles so the sticky cells
+	// (avatar, display name, actions) keep their position:
+	// the modifiers have the same specificity and come later.
+	&__cell {
+		position: relative;
+	}
+
 	@include styles.row;
 	@include styles.cell;
 }
diff --git a/apps/settings/src/components/Users/UserRow.vue b/apps/settings/src/components/Users/UserRow.vue
index ac4419052afe4..704e14c058252 100644
--- a/apps/settings/src/components/Users/UserRow.vue
+++ b/apps/settings/src/components/Users/UserRow.vue
@@ -31,7 +31,7 @@
 			<span class="row__subtitle">{{ user.id }}</span>
 		</td>
 
-		<td class="row__cell" data-cy-user-list-cell-email>
+		<td class="row__cell row__cell--email" data-cy-user-list-cell-email>
 			<span
 				v-if="!isObfuscated"
 				:title="user.email?.length > 20 ? user.email : null">
@@ -50,7 +50,7 @@
 		<td
 			v-if="settings.isAdmin || settings.isDelegatedAdmin"
 			data-cy-user-list-cell-subadmins
-			class="row__cell row__cell--large row__cell--multiline">
+			class="row__cell row__cell--large row__cell--multiline row__cell--subadmins">
 			<span
 				v-if="!isObfuscated"
 				:title="userSubAdminGroupsLabels?.length > 40 ? userSubAdminGroupsLabels : null">
@@ -58,7 +58,7 @@
 			</span>
 		</td>
 
-		<td class="row__cell" data-cy-user-list-cell-quota>
+		<td class="row__cell row__cell--quota" data-cy-user-list-cell-quota>
 			<template v-if="!isObfuscated">
 				<span :id="'quota-progress' + uniqueId">{{ userQuota }} ({{ usedSpace }})</span>
 				<NcProgressBar
@@ -73,7 +73,7 @@
 
 		<td
 			v-if="showConfig.showLanguages"
-			class="row__cell row__cell--large"
+			class="row__cell row__cell--large row__cell--languages"
 			data-cy-user-list-cell-language>
 			<span v-if="!isObfuscated">
 				{{ userLanguage.name }}
@@ -83,7 +83,7 @@
 		<td
 			v-if="showConfig.showUserBackend || showConfig.showStoragePath"
 			data-cy-user-list-cell-storage-location
-			class="row__cell row__cell--large">
+			class="row__cell row__cell--large row__cell--storage">
 			<template v-if="!isObfuscated">
 				<span v-if="showConfig.showUserBackend">{{ user.backend }}</span>
 				<span
@@ -97,7 +97,7 @@
 
 		<td
 			v-if="showConfig.showFirstLogin"
-			class="row__cell"
+			class="row__cell row__cell--first-login"
 			data-cy-user-list-cell-first-login>
 			<span v-if="!isObfuscated">{{ userFirstLogin }}</span>
 		</td>
@@ -105,7 +105,7 @@
 		<td
 			v-if="showConfig.showLastLogin"
 			:title="userLastLoginTooltip"
-			class="row__cell"
+			class="row__cell row__cell--last-login"
 			data-cy-user-list-cell-last-login>
 			<span v-if="!isObfuscated">{{ userLastLogin }}</span>
 		</td>
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<string, number> {
+	try {
+		const stored = JSON.parse(window.localStorage.getItem(STORAGE_KEY) ?? '{}')
+		const widths: Record<string, number> = {}
+		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<string, number>): void {
+	window.localStorage.setItem(STORAGE_KEY, JSON.stringify(widths))
+}

From 976b781cde65d865c5ae3fbef0a97237f62104f2 Mon Sep 17 00:00:00 2001
From: Fabio Fantoni <fabio.fantoni@m2r.biz>
Date: Tue, 14 Jul 2026 13:26:11 +0200
Subject: [PATCH 2/2] refactor(settings): rewrite UserColumnResizer with the
 composition API

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>
---
 .../components/Users/UserColumnResizer.vue    | 175 ++++++++++--------
 1 file changed, 94 insertions(+), 81 deletions(-)

diff --git a/apps/settings/src/components/Users/UserColumnResizer.vue b/apps/settings/src/components/Users/UserColumnResizer.vue
index 91cc5098b7776..f627d8168191d 100644
--- a/apps/settings/src/components/Users/UserColumnResizer.vue
+++ b/apps/settings/src/components/Users/UserColumnResizer.vue
@@ -3,8 +3,101 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+import { translate as t } from '@nextcloud/l10n'
+import { ref } from 'vue'
+import { clampColumnWidth, COLUMN_RESIZE_STEP } from '../../utils/userListColumns.ts'
+
+defineProps<{
+	/** Column key, used as CSS variable suffix */
+	column: string
+	/** Human readable column label */
+	label: string
+}>()
+
+const emit = defineEmits<{
+	reset: []
+	resize: [width: number]
+	'resize-end': []
+}>()
+
+const handle = ref<HTMLElement>()
+
+const dragging = ref(false)
+const startX = ref(0)
+const startWidth = ref(0)
+
+/**
+ * Current width of the header cell containing the handle
+ */
+function cellWidth(): number {
+	const cell = handle.value?.closest('th')
+	return cell?.getBoundingClientRect().width ?? 0
+}
+
+/**
+ * Horizontal factor turning a pointer delta into a width delta (-1 in RTL)
+ */
+function resizeDirection(): number {
+	return document.dir === 'rtl' ? -1 : 1
+}
+
+/**
+ * Start dragging and remember the initial pointer position and column width
+ *
+ * @param event The pointerdown event
+ */
+function onPointerDown(event: PointerEvent) {
+	dragging.value = true
+	startX.value = event.clientX
+	startWidth.value = cellWidth()
+	handle.value?.setPointerCapture?.(event.pointerId)
+}
+
+/**
+ * Emit the new column width while dragging
+ *
+ * @param event The pointermove event
+ */
+function onPointerMove(event: PointerEvent) {
+	if (!dragging.value) {
+		return
+	}
+	const delta = (event.clientX - startX.value) * resizeDirection()
+	emit('resize', clampColumnWidth(startWidth.value + delta))
+}
+
+/**
+ * Stop dragging and notify that resizing ended
+ */
+function onPointerUp() {
+	if (!dragging.value) {
+		return
+	}
+	dragging.value = false
+	emit('resize-end')
+}
+
+/**
+ * Resize the column with the arrow keys
+ *
+ * @param event The keydown event
+ */
+function onKeydown(event: KeyboardEvent) {
+	const direction = { ArrowLeft: -1, ArrowRight: 1 }[event.key]
+	if (direction === undefined) {
+		return
+	}
+	event.preventDefault()
+	const step = direction * COLUMN_RESIZE_STEP * resizeDirection()
+	emit('resize', clampColumnWidth(cellWidth() + step))
+	emit('resize-end')
+}
+</script>
+
 <template>
 	<span
+		ref="handle"
 		class="column-resizer"
 		role="separator"
 		aria-orientation="vertical"
@@ -16,89 +109,9 @@
 		@pointerup="onPointerUp"
 		@pointercancel="onPointerUp"
 		@keydown="onKeydown"
-		@dblclick="$emit('reset')" />
+		@dblclick="emit('reset')" />
 </template>
 
-<script lang="ts">
-import { translate as t } from '@nextcloud/l10n'
-import Vue from 'vue'
-import { clampColumnWidth, COLUMN_RESIZE_STEP } from '../../utils/userListColumns.ts'
-
-export default Vue.extend({
-	name: 'UserColumnResizer',
-
-	props: {
-		/** Column key, used as CSS variable suffix */
-		column: {
-			type: String,
-			required: true,
-		},
-
-		/** Human readable column label */
-		label: {
-			type: String,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			dragging: false,
-			startX: 0,
-			startWidth: 0,
-		}
-	},
-
-	methods: {
-		t,
-
-		cellWidth(): number {
-			const cell = (this.$el as HTMLElement).closest('th')
-			return cell?.getBoundingClientRect().width ?? 0
-		},
-
-		resizeDirection(): number {
-			return document.dir === 'rtl' ? -1 : 1
-		},
-
-		onPointerDown(event: PointerEvent) {
-			this.dragging = true
-			this.startX = event.clientX
-			this.startWidth = this.cellWidth()
-			const handle = event.target as HTMLElement
-			handle.setPointerCapture?.(event.pointerId)
-		},
-
-		onPointerMove(event: PointerEvent) {
-			if (!this.dragging) {
-				return
-			}
-			const delta = (event.clientX - this.startX) * this.resizeDirection()
-			this.$emit('resize', clampColumnWidth(this.startWidth + delta))
-		},
-
-		onPointerUp() {
-			if (!this.dragging) {
-				return
-			}
-			this.dragging = false
-			this.$emit('resize-end')
-		},
-
-		onKeydown(event: KeyboardEvent) {
-			const direction = { ArrowLeft: -1, ArrowRight: 1 }[event.key]
-			if (direction === undefined) {
-				return
-			}
-			event.preventDefault()
-			const step = direction * COLUMN_RESIZE_STEP * this.resizeDirection()
-			this.$emit('resize', clampColumnWidth(this.cellWidth() + step))
-			this.$emit('resize-end')
-		},
-	},
-})
-</script>
-
 <style lang="scss" scoped>
 .column-resizer {
 	position: absolute;