From ef4c253abf8bd3118e3d0c4d3d4cd870b6049f33 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Wed, 14 Oct 2026 11:08:19 +0200
Subject: [PATCH 1/2] feat(applications): personal layout for the standalone
 overview

- opened on its own, an application shows its tables and views as cards
  on a 12-column grid that narrows on smaller screens
- each person can give a card full, two thirds, half or one third of the
  width, and reset it to the default
- the layout is kept per user in this browser; when the browser refuses to
  store it, it applies to the current visit only and says so

Signed-off-by: Remko <remko@conduction.nl>
Assisted-by: ClaudeCode:claude-opus-5-5
---
 cypress/component/contextLayout.cy.js |  39 ++++++
 playwright/e2e/application.spec.ts    |  28 ++++
 playwright/e2e/context.spec.ts        |   1 +
 src/pages/Context.vue                 | 191 +++++++++++++++++++++++++-
 src/shared/utils/contextLayout.js     |  68 +++++++++
 5 files changed, 323 insertions(+), 4 deletions(-)
 create mode 100644 cypress/component/contextLayout.cy.js
 create mode 100644 src/shared/utils/contextLayout.js

diff --git a/cypress/component/contextLayout.cy.js b/cypress/component/contextLayout.cy.js
new file mode 100644
index 0000000000..40d5d07d0a
--- /dev/null
+++ b/cypress/component/contextLayout.cy.js
@@ -0,0 +1,39 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { getGridCellStyle, loadContextLayout, saveContextLayout } from '../../src/shared/utils/contextLayout.js'
+
+describe('application layout', () => {
+	beforeEach(() => {
+		window.localStorage.clear()
+	})
+
+	it('keeps a saved layout per application', () => {
+		saveContextLayout(7, { 4: 6, 'view-9': 4 })
+
+		expect(loadContextLayout(7)).to.deep.equal({ 4: 6, 'view-9': 4 })
+		expect(loadContextLayout(8)).to.deep.equal({})
+	})
+
+	it('resets to the default when an empty layout is saved', () => {
+		saveContextLayout(7, { 4: 6 })
+		saveContextLayout(7, {})
+
+		expect(loadContextLayout(7)).to.deep.equal({})
+	})
+
+	it('drops widths it does not know and survives a broken entry', () => {
+		saveContextLayout(7, { 4: 6, 5: 5, 6: '12' })
+		expect(loadContextLayout(7)).to.deep.equal({ 4: 6 })
+
+		const key = Object.keys(window.localStorage).find(name => name.endsWith(':7'))
+		window.localStorage.setItem(key, '{not json')
+		expect(loadContextLayout(7)).to.deep.equal({})
+	})
+
+	it('narrows a wide item to the medium grid', () => {
+		expect(getGridCellStyle(8)).to.deep.equal({ '--context-grid-span': 8, '--context-grid-span-medium': 6 })
+		expect(getGridCellStyle(4)).to.deep.equal({ '--context-grid-span': 4, '--context-grid-span-medium': 4 })
+	})
+})
diff --git a/playwright/e2e/application.spec.ts b/playwright/e2e/application.spec.ts
index 4b316ee581..76d5d914d9 100644
--- a/playwright/e2e/application.spec.ts
+++ b/playwright/e2e/application.spec.ts
@@ -108,6 +108,34 @@ test.describe('Applications', () => {
 		await expect(page.locator('[data-cy="context-title"]')).toContainText('listed application')
 	})
 
+	test('A width chosen for a table in an application opened on its own is kept after a reload', async ({ userPage: { page, user } }) => {
+		const tableResponse = await ocsRequest(page.request, user, {
+			method: 'POST',
+			url: '/ocs/v2.php/apps/tables/api/2/tables?format=json',
+			data: { title: 'Layout table', template: 'custom' },
+		})
+		const table = (await tableResponse.json()).ocs.data
+		const contextResponse = await ocsRequest(page.request, user, {
+			method: 'POST',
+			url: '/ocs/v2.php/apps/tables/api/2/contexts?format=json',
+			data: { name: 'layout application', iconName: 'star', nodes: [{ id: table.id, type: 0, permissions: 1 }] },
+		})
+		const context = (await contextResponse.json()).ocs.data
+
+		await page.goto(`/index.php/apps/tables/app/${context.id}`)
+		const item = page.locator('[data-cy="context-grid-item"]')
+		await expect(item).toHaveCount(1, { timeout: 10000 })
+
+		await page.locator('[data-cy="context-layout-edit"]').click()
+		await item.getByRole('button', { name: 'Width of Layout table' }).click()
+		await page.getByRole('menuitemradio', { name: 'Half' }).click()
+		await page.locator('[data-cy="context-layout-save"]').click()
+		await expect(item).toHaveAttribute('style', /--context-grid-span: 6/)
+
+		await page.reload()
+		await expect(page.locator('[data-cy="context-grid-item"]')).toHaveAttribute('style', /--context-grid-span: 6/, { timeout: 10000 })
+	})
+
 	test('A page with widgets added on the overview gets a menu entry and opens', async ({ userPage: { page } }) => {
 		await page.goto('/index.php/apps/tables')
 		await createContext(page, 'overview application')
diff --git a/playwright/e2e/context.spec.ts b/playwright/e2e/context.spec.ts
index 8afce5a67d..dccece8da4 100644
--- a/playwright/e2e/context.spec.ts
+++ b/playwright/e2e/context.spec.ts
@@ -247,6 +247,7 @@ test.describe('Manage a context', () => {
 		await openApplication(page, contextTitle)
 		// The application has loaded once its loading icon is gone; only then does a missing table mean anything
 		await expect(page.locator('.main-context-view > .icon-loading')).toHaveCount(0, { timeout: 10000 })
+		await expect(page.locator('[data-cy="context-grid-item"]')).toHaveCount(0)
 		await expect(page.locator('h1', { hasText: tableTitle })).toBeHidden()
 	})
 
diff --git a/src/pages/Context.vue b/src/pages/Context.vue
index a8b416e016..36531019ed 100644
--- a/src/pages/Context.vue
+++ b/src/pages/Context.vue
@@ -366,8 +366,52 @@
 				</section>
 			</div>
 
-			<div v-if="!selectedMenuItem && isStandalone" class="resources">
-				<div v-for="resource in contextResources" :key="resource.key">
+			<div v-if="!selectedMenuItem && isStandalone" class="context__layout-toolbar" data-cy="context-layout-toolbar">
+				<template v-if="isEditingLayout">
+					<NcButton v-if="hasCustomLayout" variant="tertiary" data-cy="context-layout-reset" @click="draftLayout = {}">
+						<template #icon>
+							<Restore :size="20" />
+						</template>
+						{{ t('tables', 'Reset layout') }}
+					</NcButton>
+					<NcButton variant="tertiary" data-cy="context-layout-cancel" @click="draftLayout = null">
+						{{ t('tables', 'Cancel') }}
+					</NcButton>
+					<NcButton variant="primary" data-cy="context-layout-save" @click="saveLayout">
+						<template #icon>
+							<ContentSaveOutline :size="20" />
+						</template>
+						{{ t('tables', 'Save') }}
+					</NcButton>
+				</template>
+				<NcButton v-else variant="secondary" data-cy="context-layout-edit" @click="draftLayout = { ...layout }">
+					<template #icon>
+						<PencilOutline :size="20" />
+					</template>
+					{{ t('tables', 'Edit layout') }}
+				</NcButton>
+			</div>
+			<div v-if="!selectedMenuItem && isStandalone" class="context__grid" :class="{ 'context__grid--editing': isEditingLayout }">
+				<section v-for="resource in contextResources"
+					:key="resource.key"
+					class="context__grid-item"
+					:style="getGridCellStyle(getResourceSpan(resource))"
+					data-cy="context-grid-item">
+					<div v-if="isEditingLayout" class="context__grid-item-toolbar">
+						<NcActions :menu-name="t('tables', 'Width')" :aria-label="t('tables', 'Width of {title}', { title: resource.title }, undefined, { escape: false })">
+							<template #icon>
+								<TableColumnWidth :size="20" />
+							</template>
+							<NcActionRadio v-for="option in widthOptions"
+								:key="option.span"
+								:name="'context-width-' + resource.key"
+								:value="option.span"
+								:model-value="getResourceSpan(resource)"
+								@update:model-value="span => setResourceSpan(resource, span)">
+								{{ option.label }}
+							</NcActionRadio>
+						</NcActions>
+					</div>
 					<div v-if="!resource.isView" class="resource">
 						<TableWrapper v-model:view-setting="resourceViewSettings[resource.key]" :table="resource" :columns="columns[resource.key]"
 							:rows="rows[resource.key]" @create-column="createColumn(false, resource)"
@@ -381,7 +425,7 @@
 							@import="openImportModal(resource, true)" @download-csv="downloadCSV(resource, true)"
 							@download-filtered-csv="rows => downloadFilteredCSV(rows, resource, true)" />
 					</div>
-				</div>
+				</section>
 			</div>
 		</div>
 
@@ -394,7 +438,7 @@
 <script>
 import MainModals from '../modules/modals/Modals.vue'
 import { mapState, mapActions, storeToRefs } from 'pinia'
-import { NcActionButton, NcActionSeparator, NcActions, NcAvatar, NcButton, NcEmptyContent, NcIconSvgWrapper, NcLoadingIcon, NcTextField } from '@nextcloud/vue'
+import { NcActionButton, NcActionRadio, NcActionSeparator, NcActions, NcAvatar, NcButton, NcEmptyContent, NcIconSvgWrapper, NcLoadingIcon, NcTextField } from '@nextcloud/vue'
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'
@@ -407,8 +451,10 @@ import LinkVariant from 'vue-material-design-icons/LinkVariant.vue'
 import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
 import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
+import Restore from 'vue-material-design-icons/Restore.vue'
 import SwapHorizontal from 'vue-material-design-icons/SwapHorizontal.vue'
 import TableIcon from 'vue-material-design-icons/Table.vue'
+import TableColumnWidth from 'vue-material-design-icons/TableColumnWidth.vue'
 import TrayArrowDown from 'vue-material-design-icons/TrayArrowDown.vue'
 import ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue'
 import GridView from '../modules/grid/GridView.vue'
@@ -416,6 +462,7 @@ import MenuItemIcon from '../shared/components/MenuItemIcon.vue'
 import MenuItemsEditor from '../shared/components/ncContextResource/MenuItemsEditor.vue'
 import permissionsMixin from '../shared/components/ncTable/mixins/permissionsMixin.js'
 import { useEventBusSubscriptions } from '../shared/composables/useEventBusSubscriptions.js'
+import { GRID_COLUMNS, getGridCellStyle, loadContextLayout, saveContextLayout } from '../shared/utils/contextLayout.js'
 import { areMenuItemsValid, menuItemRoute, menuTree, toEditableMenuItems, toMenuItemPayload } from '../shared/utils/menuItems.js'
 import TableWrapper from '../modules/main/sections/TableWrapper.vue'
 import CustomView from '../modules/main/sections/View.vue'
@@ -433,6 +480,7 @@ export default {
 	components: {
 		MainModals,
 		NcActionButton,
+		NcActionRadio,
 		NcActionSeparator,
 		NcActions,
 		NcAvatar,
@@ -450,7 +498,9 @@ export default {
 		OpenInNew,
 		PencilOutline,
 		Plus,
+		Restore,
 		SwapHorizontal,
+		TableColumnWidth,
 		TableIcon,
 		TrayArrowDown,
 		ViewDashboardOutline,
@@ -485,6 +535,9 @@ export default {
 			menuDraft: null,
 			menuSaving: false,
 			pageFilter: '',
+			// The user's own widths of the tables and views, and the ones being edited
+			layout: {},
+			draftLayout: null,
 			standaloneContextId: loadState('tables', 'contextId', null),
 			openedFirstPage: false,
 		}
@@ -562,6 +615,23 @@ export default {
 				return { ...page, kind: 'view', typeLabel: t('tables', 'View'), description, view }
 			})
 		},
+		isEditingLayout() {
+			return this.draftLayout !== null
+		},
+		activeLayout() {
+			return this.draftLayout ?? this.layout
+		},
+		hasCustomLayout() {
+			return Object.keys(this.activeLayout).length > 0
+		},
+		widthOptions() {
+			return [
+				{ span: 12, label: t('tables', 'Full width') },
+				{ span: 8, label: t('tables', 'Two thirds') },
+				{ span: 6, label: t('tables', 'Half') },
+				{ span: 4, label: t('tables', 'One third') },
+			]
+		},
 		filteredPages() {
 			const query = this.pageFilter.trim().toLowerCase()
 			if (query === '') {
@@ -732,6 +802,33 @@ export default {
 	methods: {
 		...mapActions(useTablesStore, ['loadContext', 'validateExportAccess', 'loadContextTable', 'loadContextView', 'updateContextMenuItems']),
 		...mapActions(useDataStore, ['loadColumnsFromBE', 'loadRowsFromBE', 'loadRelationsFromBE']),
+		getGridCellStyle,
+		getResourceSpan(resource) {
+			return this.activeLayout[resource.key] ?? GRID_COLUMNS
+		},
+		setResourceSpan(resource, span) {
+			const draftLayout = { ...this.activeLayout }
+			if (span === GRID_COLUMNS) {
+				delete draftLayout[resource.key]
+			} else {
+				draftLayout[resource.key] = span
+			}
+			this.draftLayout = draftLayout
+		},
+		saveLayout() {
+			if (this.draftLayout === null) {
+				return
+			}
+			// The layout is the user's own arrangement and saves once, when editing ends
+			this.layout = this.draftLayout
+			this.draftLayout = null
+			try {
+				saveContextLayout(this.activeContextId, this.layout)
+			} catch (error) {
+				console.error('The application layout could not be stored', error)
+				showError(t('tables', 'Your layout applies to this visit only, as this browser does not allow storing it.'))
+			}
+		},
 		async copyAddress() {
 			try {
 				await navigator.clipboard.writeText(this.applicationUrl)
@@ -880,6 +977,8 @@ export default {
 			this.loading = true
 			this.contextResources = []
 			this.resourceViewSettings = {}
+			this.layout = loadContextLayout(this.activeContextId)
+			this.draftLayout = null
 
 			try {
 				await this.loadContext({ id: this.activeContextId })
@@ -1383,6 +1482,90 @@ export default {
 	}
 }
 
+.context__layout-toolbar {
+	display: flex;
+	justify-content: flex-end;
+	gap: calc(2 * var(--default-grid-baseline));
+	width: var(--app-content-width, 100%);
+	padding-block: calc(3 * var(--default-grid-baseline)) 0;
+	padding-inline: calc(var(--default-clickable-area) + 4 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
+}
+
+// A 12-column grid of the tables and views, collapsing to 6 columns and then to one on smaller screens
+.context__grid {
+	display: grid;
+	grid-template-columns: repeat(12, minmax(0, 1fr));
+	gap: calc(4 * var(--default-grid-baseline));
+	width: var(--app-content-width, 100%);
+	padding: calc(4 * var(--default-grid-baseline));
+}
+
+.context__grid-item {
+	overflow-x: auto;
+	grid-column: span var(--context-grid-span, 12);
+	min-width: 0;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large);
+	background-color: var(--color-main-background);
+	box-shadow: 0 2px 4px var(--color-box-shadow);
+
+	// A table or view fits its card instead of the whole page
+	.resource {
+		width: auto;
+		min-width: 0;
+		margin: 0;
+
+		&:deep(.row.first-row),
+		&:deep(.row.space-T),
+		&:deep(.options.row),
+		&:deep(.options .sticky) {
+			position: static;
+			width: auto;
+		}
+
+		&:deep(.row.first-row) {
+			padding-inline-start: calc(4 * var(--default-grid-baseline));
+		}
+
+		// The sticky table header sticks to the top of its card, not below the page header
+		&:deep(table thead) {
+			top: 0;
+		}
+	}
+}
+
+.context__grid--editing .context__grid-item {
+	outline: 2px dashed var(--color-border-dark);
+	outline-offset: 2px;
+}
+
+.context__grid-item-toolbar {
+	display: flex;
+	justify-content: flex-end;
+	padding: calc(2 * var(--default-grid-baseline));
+	border-bottom: 1px solid var(--color-border);
+}
+
+@media (max-width: 900px) {
+	.context__grid {
+		grid-template-columns: repeat(6, minmax(0, 1fr));
+	}
+
+	.context__grid-item {
+		grid-column: span var(--context-grid-span-medium, 6);
+	}
+}
+
+@media (max-width: 600px) {
+	.context__grid {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.context__grid-item {
+		grid-column: 1 / -1;
+	}
+}
+
 .context--standalone {
 	width: 100%;
 
diff --git a/src/shared/utils/contextLayout.js b/src/shared/utils/contextLayout.js
new file mode 100644
index 0000000000..635c1c0a8d
--- /dev/null
+++ b/src/shared/utils/contextLayout.js
@@ -0,0 +1,68 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { getCurrentUser } from '@nextcloud/auth'
+
+/** Number of columns of the application grid on a wide screen. */
+export const GRID_COLUMNS = 12
+
+/** Number of columns the grid collapses to on a medium screen. */
+export const GRID_COLUMNS_MEDIUM = 6
+
+/** Column spans a table or view can take in the application grid. */
+export const GRID_SPANS = [12, 8, 6, 4]
+
+/**
+ * @param {number|string} contextId id of the application
+ * @return {string}
+ */
+function getStorageKey(contextId) {
+	return 'tables:context-layout:' + (getCurrentUser()?.uid ?? '') + ':' + contextId
+}
+
+/**
+ * Inline style placing one grid item, read by the grid's responsive rules.
+ *
+ * @param {number} span number of columns the item spans on a wide screen
+ * @return {object}
+ */
+export function getGridCellStyle(span) {
+	return {
+		'--context-grid-span': span,
+		'--context-grid-span-medium': Math.min(span, GRID_COLUMNS_MEDIUM),
+	}
+}
+
+/**
+ * The current user's arrangement of an application, as a map of resource key to column span.
+ * Browser storage can be unavailable (private windows, blocked site data); the default layout is used then.
+ *
+ * @param {number|string} contextId id of the application
+ * @return {Object<string, number>}
+ */
+export function loadContextLayout(contextId) {
+	try {
+		const storedLayout = JSON.parse(window.localStorage.getItem(getStorageKey(contextId)) ?? '{}')
+		return Object.fromEntries(Object.entries(storedLayout ?? {})
+			.filter(([, span]) => GRID_SPANS.includes(span)))
+	} catch (error) {
+		console.warn('Application layout could not be read, using the default', error)
+		return {}
+	}
+}
+
+/**
+ * Stores the current user's arrangement in this browser. Throws when the browser refuses it,
+ * so the caller can tell the user that the layout will not be kept.
+ *
+ * @param {number|string} contextId id of the application
+ * @param {Object<string, number>} layout map of resource key to column span; an empty map resets to the default
+ */
+export function saveContextLayout(contextId, layout) {
+	if (Object.keys(layout).length === 0) {
+		window.localStorage.removeItem(getStorageKey(contextId))
+		return
+	}
+	window.localStorage.setItem(getStorageKey(contextId), JSON.stringify(layout))
+}

From 057d7da8970f659a692f42e4dd1face2b8304af1 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Wed, 14 Oct 2026 14:13:17 +0200
Subject: [PATCH 2/2] test(applications): open the width menu of a card through
 its toolbar

NcActions with a menu name is named after that name, not after its aria-label, so the test finds the menu in the card's toolbar instead.

Signed-off-by: Remko <remko@conduction.nl>
Assisted-by: ClaudeCode:claude-opus-5-5
---
 playwright/e2e/application.spec.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/playwright/e2e/application.spec.ts b/playwright/e2e/application.spec.ts
index a481d05524..ededcfa964 100644
--- a/playwright/e2e/application.spec.ts
+++ b/playwright/e2e/application.spec.ts
@@ -127,8 +127,9 @@ test.describe('Applications', () => {
 		await expect(item).toHaveCount(1, { timeout: 10000 })
 
 		await page.locator('[data-cy="context-layout-edit"]').click()
-		await item.getByRole('button', { name: 'Width of Layout table' }).click()
-		await page.getByRole('menuitemradio', { name: 'Half' }).click()
+		// The width menu is the only menu in the card's toolbar while the layout is edited
+		await item.locator('.context__grid-item-toolbar').getByRole('button').first().click()
+		await page.getByRole('menuitemradio', { name: 'Half' }).or(page.getByRole('radio', { name: 'Half' })).first().click()
 		await page.locator('[data-cy="context-layout-save"]').click()
 		await expect(item).toHaveAttribute('style', /--context-grid-span: 6/)