@conduction/nextcloud-vue 2.144.0 → 2.146.0

package/src/components/CnNotificationMatrix/CnNotificationMatrix.vue

@@ -331,6 +331,23 @@ import {
  * @event {object} digest-change — A channel's digest was set. Payload: `{ channelId, mode, timeOfDay }`.
  * @event {object} test-send — A test was asked for. Payload: `{ channelId }`.
  */
+/**
+ * An event's shipped default in one channel: one boolean for every channel,
+ * or the channel's own entry when the default differs per channel.
+ *
+ * @param {object} event The event.
+ * @param {object} channel The channel.
+ * @return {boolean} The default.
+ * @spec openspec/changes/notification-matrix-default-per-channel/specs/notification-matrix/spec.md
+ */
+function appDefaultFor(event, channel) {
+	const value = event?.appDefault
+	if (value !== null && typeof value === 'object') {
+		return value[channel?.id] === true
+	}
+	return value === true
+}
+
 export default {
 	name: 'CnNotificationMatrix',
 
@@ -342,7 +359,9 @@ export default {
 	props: {
 		/**
 		 * The events, each `{ id, label, group, groupLabel, immediate,
-		 * appDefault }`. From the host's catalogue.
+		 * appDefault }`. From the host's catalogue. `appDefault` is one
+		 * boolean for every channel, or `{ [channelId]: boolean }` when the
+		 * default differs per channel (an opt-in e-mail is off by default).
 		 */
 		events: {
 			type: Array,
@@ -607,7 +626,7 @@ export default {
 			})
 
 			return resolvePreference({
-				appDefault: event?.appDefault === true,
+				appDefault: appDefaultFor(event, channel),
 				groupValue: this.at(this.groupValues, event, channel),
 				personalValue: narrow.value === null
 					? this.at(this.personalValues, event, channel)
@@ -1135,7 +1154,10 @@ export default {
 		min-inline-size: 20px;
 		block-size: 20px;
 		min-block-size: 20px;
-		margin: 0;
+		/* A block box, so the line's baseline adds no height: the row is
+		   42px as on the board (10px, the 1px-low checkbox, 10px, the rule). */
+		display: block;
+		margin: 1px auto 0;
 	}
 
 	.cn-notification-matrix__group {

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -53,15 +53,37 @@
 						scope="col"
 						:aria-sort="col.sortable ? sortStateOf(col.key) : undefined"
 						:class="{ 'cn-record-list__cell--end': col.align === 'end' }">
-						<button
-							v-if="col.sortable"
-							type="button"
-							class="cn-record-list__sort"
-							:data-testid="`cn-record-list-sort-${col.key}`"
-							@click="toggleTableSort(col.key)">
-							{{ col.label }}
-							<span class="cn-record-list__sort-mark" aria-hidden="true">{{ sortMarkOf(col.key) }}</span>
-						</button>
+						<span v-if="col.sortable || tableFilterable" class="cn-record-list__head">
+							<button
+								v-if="col.sortable"
+								type="button"
+								class="cn-record-list__sort"
+								:data-testid="`cn-record-list-sort-${col.key}`"
+								@click="toggleTableSort(col.key)">
+								{{ col.label }}
+								<span class="cn-record-list__sort-mark" aria-hidden="true">{{ sortMarkOf(col.key) }}</span>
+							</button>
+							<template v-else>
+								{{ col.label }}
+							</template>
+							<!-- `content.filterable`: the head offers the values the column holds and keeps the rows with a chosen one. -->
+							<NcActions
+								v-if="tableFilterable"
+								class="cn-record-list__head-filter"
+								:aria-label="filterLabelOf(col.label)"
+								:data-testid="`cn-record-list-filter-${col.key}`">
+								<template #icon>
+									<FilterOutline :size="14" />
+								</template>
+								<NcActionCheckbox
+									v-for="option in tableFilterOptions(col.key)"
+									:key="option"
+									:modelValue="(tableFilters[col.key] || []).includes(option)"
+									@update:modelValue="toggleTableFilter(col.key, option)">
+									{{ option }}
+								</NcActionCheckbox>
+							</NcActions>
+						</span>
 						<template v-else>
 							{{ col.label }}
 						</template>
@@ -550,10 +572,11 @@
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { NcActionButton, NcActionLink, NcActions, NcButton, NcLoadingIcon } from '@nextcloud/vue'
+import { NcActionButton, NcActionCheckbox, NcActionLink, NcActions, NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import { inject, ref } from 'vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
+import FilterOutline from 'vue-material-design-icons/FilterOutline.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
 import CnRecordNoteRows from './CnRecordNoteRows.vue'
@@ -649,7 +672,7 @@ function unwrap(value) {
 export default {
 	name: 'CnRecordListWidget',
 
-	components: { Check, ChevronRight, CnIcon, CnRecordNoteRows, CnStatusBadge, NcActionButton, NcActionLink, NcActions, NcButton, NcLoadingIcon },
+	components: { Check, ChevronRight, CnIcon, CnRecordNoteRows, CnStatusBadge, FilterOutline, NcActionButton, NcActionCheckbox, NcActionLink, NcActions, NcButton, NcLoadingIcon },
 
 	inject: {
 		/** Detail-page object context (`{ objectId, object, register, schema }`). */
@@ -714,6 +737,8 @@ export default {
 		 * without a value.
 		 * `density: "compact"` draws the rows 10px above and below, at least
 		 * 56px tall, with the title at 500 (DqProcesanalyse).
+		 * On `cards` it draws the small framed card: 12px 14px in, the title
+		 * 15px/700 with the pill at its end (DqInspectie).
 		 * `density: "stacked"` stands the rows 10px apart with no rule and no
 		 * row padding (DqDagAfsluiten "Morgen eerst").
 		 * In `rows`, `text` is a line under the meta line ("12 dagen stil"),
@@ -809,6 +834,8 @@ export default {
 		return {
 			/** The reader's sort of a `table`: the column key and `ascending` or `descending`. */
 			tableSort: { key: '', dir: '' },
+			/** The reader's head filters of a `table`: `{ [columnKey]: cellTexts[] }`. */
+			tableFilters: {},
 			rows: [],
 			/** The `aggregates` figures per row id: `{ [rowId]: { [key]: value } }`. */
 			aggregateValues: {},
@@ -1183,7 +1210,16 @@ export default {
 			const isTemplate = (value) => typeof value === 'string' || (Array.isArray(value) && value.length > 0 && value.every((entry) => typeof entry === 'string'))
 			return columns
 				.filter((col) => col && typeof col === 'object' && isTemplate(col.value))
-				.map((col, index) => ({ ...col, key: `col-${index}`, label: typeof col.label === 'string' ? this.translate(col.label) : '' }))
+				.map((col, index) => ({ ...col, key: `col-${index}`, label: typeof col.label === 'string' ? this.translate(col.label) : '', sortable: col.sortable === true || this.content?.sortable === true }))
+		},
+
+		/**
+		 * Whether the `table` heads filter (`content.filterable`).
+		 *
+		 * @return {boolean}
+		 */
+		tableFilterable() {
+			return this.content?.filterable === true
 		},
 
 		/**
@@ -1193,8 +1229,27 @@ export default {
 		 * @spec openspec/changes/record-list-table/specs/record-list-table/spec.md#requirement-a-record-list-can-draw-its-rows-as-a-small-table
 		 */
 		tableRows() {
+			const rows = this.tableAllRows.filter((row) => Object.entries(this.tableFilters).every(([key, values]) => {
+				const index = this.tableColumns.findIndex((col) => col.key === key)
+				return values.length === 0 || index < 0 || values.includes(row.cells[index].text)
+			}))
+			const { key, dir } = this.tableSort
+			const index = this.tableColumns.findIndex((col) => col.key === key)
+			if (index < 0 || !dir) {
+				return rows
+			}
+			const sign = dir === 'descending' ? -1 : 1
+			return [...rows].sort((a, b) => sign * compareCells(a.cells[index].text, b.cells[index].text))
+		},
+
+		/**
+		 * Every `table` row, before the reader's head filters and sort.
+		 *
+		 * @return {Array<object>} `{ key, cells: [{ key, text, align, alert }] }`.
+		 */
+		tableAllRows() {
 			const indentPath = this.content?.indentPath
-			const rows = this.items.map((item) => ({
+			return this.items.map((item) => ({
 				key: item.key,
 				row: item.row,
 				rowActions: this.rowActions.length > 0 ? this.rowActionsOf(item.row) : [],
@@ -1215,13 +1270,6 @@ export default {
 					}
 				}),
 			}))
-			const { key, dir } = this.tableSort
-			const index = this.tableColumns.findIndex((col) => col.key === key)
-			if (index < 0 || !dir) {
-				return rows
-			}
-			const sign = dir === 'descending' ? -1 : 1
-			return [...rows].sort((a, b) => sign * compareCells(a.cells[index].text, b.cells[index].text))
 		},
 
 		/**
@@ -2246,6 +2294,41 @@ export default {
 			this.tableSort = { key, dir }
 		},
 
+		/**
+		 * The values a `table` column's head filter offers: each text the column holds, once.
+		 *
+		 * @param {string} key The column key.
+		 * @return {Array<string>} The texts, in row order.
+		 */
+		tableFilterOptions(key) {
+			const index = this.tableColumns.findIndex((col) => col.key === key)
+			if (index < 0) {
+				return []
+			}
+			return [...new Set(this.tableAllRows.map((row) => row.cells[index].text).filter((text) => text !== ''))]
+		},
+
+		/**
+		 * Keep or drop one value of a `table` column's head filter.
+		 *
+		 * @param {string} key The column key.
+		 * @param {string} value The cell text.
+		 */
+		toggleTableFilter(key, value) {
+			const current = this.tableFilters[key] || []
+			this.tableFilters = { ...this.tableFilters, [key]: current.includes(value) ? current.filter((v) => v !== value) : [...current, value] }
+		},
+
+		/**
+		 * The accessible name of a column's head filter.
+		 *
+		 * @param {string} label The column label.
+		 * @return {string}
+		 */
+		filterLabelOf(label) {
+			return t('nextcloud-vue', 'Filter by {column}', { column: label })
+		},
+
 		/**
 		 * The rows of a read with `flattenPath` set: each entry of the list at
 		 * that path on a record becomes a row, with the record at `@parent`.
@@ -3232,6 +3315,16 @@ export default {
 	font-size: 10px;
 }
 
+.cn-record-list__head {
+	display: inline-flex;
+	gap: 4px;
+	align-items: center;
+}
+
+.cn-record-list__head-filter {
+	--button-size: 22px;
+}
+
 .cn-record-list__table .cn-record-list__cell--end {
 	padding-inline-start: 12px;
 	text-align: end;
@@ -3320,6 +3413,7 @@ export default {
 	font-weight: 600;
 	height: 34px;
 	justify-content: center;
+	margin: 0;
 	padding: 0 14px;
 	text-decoration: none;
 }
@@ -3383,6 +3477,24 @@ export default {
 	text-decoration: none;
 }
 
+/* `density: "compact"` on cards: the boards' small framed rows (DqInspectie
+   "Molenweg 4" and the outbox): 12px 14px in, the title 15px/700 on an
+   18px line with the pill at its end, the meta 6px under it. */
+.cn-record-list--compact .cn-record-list__card {
+	gap: 6px;
+	padding: 12px 14px;
+}
+
+.cn-record-list--compact .cn-record-list__card-head {
+	align-items: flex-start;
+}
+
+.cn-record-list--compact .cn-record-list__card .cn-record-list__title {
+	font-size: 15px;
+	font-weight: 700;
+	line-height: 1.2;
+}
+
 .cn-record-list__card--link:hover,
 .cn-record-list__card--link:focus-visible {
 	border-color: var(--color-border-dark, var(--color-border));

package/src/components/CnRetentionWidget/CnRetentionWidget.vue

@@ -604,6 +604,7 @@ export default {
 	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 	gap: 12px 24px;
 	margin: 0;
+	padding: 0;
 }
 
 /* The server draws every dt as a 130px right-aligned inline block and pads
@@ -621,6 +622,7 @@ export default {
 	padding: 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
+	line-height: 1.2;
 }
 
 .cn-retention__fact dd {

package/src/components/CnSettingsField/CnSettingsField.vue

@@ -275,6 +275,7 @@
 			type="number"
 			:min="field.min"
 			:max="field.max"
+			:step="numberStep"
 			:modelValue="stringValue"
 			:readonly="field.readOnly"
 			:error="!!error"
@@ -424,6 +425,20 @@ export default {
 			return INPUT_TYPES.includes(this.kind) ? this.kind : 'text'
 		},
 
+		/**
+		 * The number input's step: the field's own, 1 for a whole number, else
+		 * any, so a decimal value (0.8) is not invalid to the browser.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/settings-number-decimal-step/specs/settings-fields/spec.md#requirement-a-number-setting-steps-as-it-is-declared
+		 */
+		numberStep() {
+			if (typeof this.field.step === 'number' || (typeof this.field.step === 'string' && this.field.step !== '')) {
+				return String(this.field.step)
+			}
+			return this.field.integer ? '1' : 'any'
+		},
+
 		/** @return {string} The label. */
 		label() {
 			return String(this.field.label || this.field.key || '')

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -1566,12 +1566,17 @@ export default {
 
 .cn-tabs-widget__panel-heading-text {
 	display: flex;
-	flex: 1 1 260px;
 	flex-direction: column;
 	gap: 4px;
 	min-width: 0;
 }
 
+/* The 260px basis is a width in the actions row; in the column heading it
+   would be a height. */
+.cn-tabs-widget__panel-heading--actions > .cn-tabs-widget__panel-heading-text {
+	flex: 1 1 260px;
+}
+
 .cn-tabs-widget__panel-actions {
 	display: flex;
 	justify-content: flex-end;

package/src/components/CnWidgetObjectTable/CnWidgetObjectTable.vue

@@ -118,9 +118,10 @@ import CnConfirmDialog from '../../dialogs/CnConfirmDialog.vue'
 import CnDataTable from '../CnDataTable/CnDataTable.vue'
 import { getByPath, useEndpointSource } from '../../composables/useEndpointSource.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
-import { dispatchAction, resolveObjectOpType } from '../../utils/actionsDispatcher.js'
+import { dispatchAction, interpolateActionTarget, resolveObjectOpType } from '../../utils/actionsDispatcher.js'
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
 import { headerFilterParams, nextHeaderFilters, withSortableColumns } from '../../utils/headerFilterState.js'
+import { localHeaderRows } from '../../utils/localHeaderRows.js'
 import { pageFilter, pageSort } from '../../utils/pageControls.js'
 import { readPath } from '../../utils/readPath.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
@@ -869,9 +870,9 @@ export default {
 			if (this.endpointActive && this.columns.some((col) => col && typeof col === 'object' && col.labelPath)) {
 				inner.columns = this.labelledColumns(inner.columns || this.columns)
 			}
-			// Header sort and filter (`sortable`, `filterable`) only where the
-			// widget fetches its own rows: the server sorts and filters.
-			if (this.selfFetchActive && (this.sortable !== false || this.filterable)) {
+			// Header sort and filter (`sortable`, `filterable`): the server sorts
+			// and filters a self-fetch; endpoint rows are sorted and filtered here.
+			if ((this.selfFetchActive || this.endpointActive) && (this.sortable !== false || this.filterable)) {
 				inner.columns = withSortableColumns(inner.columns || this.columns, this.sortable)
 				inner.filterable = this.filterable
 				inner.activeFilters = this.headerFilters
@@ -889,7 +890,7 @@ export default {
 				}
 			}
 			if (this.endpointActive) {
-				inner.rows = this.endpointRows
+				inner.rows = localHeaderRows(this.endpointRows, this.headerSort, this.headerFilters)
 				inner.loading = this.epLoading || this.loading
 			}
 			if (this.rowRoute) {
@@ -1159,9 +1160,13 @@ export default {
 				return { ok: false, error: '' }
 			}
 			if (action.type !== 'object-op') {
-				const wrapped = (!action.type || action.type === 'handler')
-					? { ...action, args: [...(action.args || []), row] }
-					: action
+				let wrapped = action
+				if (!action.type || action.type === 'handler') {
+					wrapped = { ...action, args: [...(action.args || []), row] }
+				} else if (action.type === 'navigate' && row) {
+					// A row's navigate reads that row: `{objectId}` / `@objectId` is its id, `@object.<field>` its fields.
+					wrapped = { ...action, target: interpolateActionTarget(action.target, { objectId: row.id, object: row }) }
+				}
 				if (typeof this.cnDispatchAction === 'function') {
 					this.cnDispatchAction(wrapped)
 				} else {

package/src/components/CnWorkspaceFilterWidget/CnWorkspaceFilterWidget.vue

@@ -880,15 +880,23 @@ export default {
 		 */
 		/**
 		 * The value an input starts with: `content.default`, else the current
-		 * quarter or year for those types, else empty.
+		 * quarter or year for those types, else empty. For a quarter or year
+		 * input, `default: "previous"` is the last complete one (DqTermijnen
+		 * opens on the last complete quarter).
 		 *
 		 * @return {string}
 		 */
 		inputDefault() {
+			const today = new Date()
+			if (this.content.default === 'previous' && this.inputType === 'quarter') {
+				return quarterKey(new Date(today.getFullYear(), today.getMonth() - 3, 1))
+			}
+			if (this.content.default === 'previous' && this.inputType === 'year') {
+				return String(today.getFullYear() - 1)
+			}
 			if (this.content.default !== undefined && this.content.default !== null) {
 				return String(this.content.default)
 			}
-			const today = new Date()
 			if (this.inputType === 'quarter') {
 				return quarterKey(today)
 			}

package/src/composables/indexSources.js

@@ -1109,7 +1109,9 @@ function fillRowTemplate(template, row) {
  * template, "{case.title}") or `linkedField` (a path) fills the "Linked"
  * column, drawn when a kind declares one; `sourceConfig.linkedLabel` names it.
  * `subtitleTemplate` ("Case {identifier}", translated) fills the line under a
- * result, else `subtitleField`.
+ * result, else `subtitleField`; `subtitleResolve` (`{ field, schema, labelField,
+ * as }`) names a referenced object for it as `{as}`. `sourceConfig.titleWrap`
+ * wraps a long result title instead of cutting it.
  * `linkedUser: true` reads that value as a user id and shows the user's
  * display name. `sourceConfig.columnWidths` sets a width per column key.
  * The page's title and count line can name the term as `{term}`, and the
@@ -1226,9 +1228,32 @@ function searchSource(config = {}, context = {}) {
 		return ''
 	}
 
-	const subtitleOf = (kind, object) => {
+	// `subtitleResolve`: `{ field, schema, register?, labelField?, as }` names
+	// the object a reference points at, for the subtitle template as `{as}`.
+	const subtitleLabels = async (kind) => {
+		const resolve = kind.subtitleResolve
+		if (!resolve || !resolve.schema || !resolve.field) {
+			return null
+		}
+		const objects = await fetchReferenceObjects({ register: resolve.register || kind.register, schema: resolve.schema }).catch(() => [])
+		const labels = new Map()
+		for (const object of objects) {
+			const id = object.id || object.uuid || (object['@self'] && object['@self'].id)
+			const label = readPath(object, resolve.labelField || 'title') ?? object.name
+			if (id !== undefined && label !== undefined && label !== null) {
+				labels.set(String(id), String(label))
+			}
+		}
+		return labels
+	}
+
+	const subtitleOf = (kind, object, labels = null) => {
 		if (kind.subtitleTemplate) {
-			return fillTemplate(translate(kind.subtitleTemplate), object)
+			const resolve = kind.subtitleResolve
+			const data = labels && resolve
+				? { ...object, [resolve.as || resolve.field]: labels.get(String(readPath(object, resolve.field) ?? '')) ?? '' }
+				: object
+			return fillTemplate(translate(kind.subtitleTemplate), data)
 		}
 		return kind.subtitleField ? String(readPath(object, kind.subtitleField) ?? '') : ''
 	}
@@ -1247,6 +1272,7 @@ function searchSource(config = {}, context = {}) {
 		const results = Array.isArray(body.results) ? body.results : (Array.isArray(body) ? body : [])
 		const labels = kind.statusResolve && kind.statusField ? await statusLabels(kind) : null
 		const userNames = kind.linkedUser === true ? await linkedUserNames(kind, results) : null
+		const subtitleNames = await subtitleLabels(kind)
 		return {
 			total: typeof body.total === 'number' ? body.total : results.length,
 			rows: results.map((object) => {
@@ -1261,7 +1287,7 @@ function searchSource(config = {}, context = {}) {
 					kindLabel: kind.label,
 					kindText: kindTextOf(kind, object),
 					title: String(readPath(object, kind.titleField || 'title') ?? object.name ?? id ?? ''),
-					subtitle: subtitleOf(kind, object),
+					subtitle: subtitleOf(kind, object, subtitleNames),
 					status,
 					linked: userNames ? (userNames.get(linkedOf(kind, object)) || linkedOf(kind, object)) : linkedOf(kind, object),
 					href: kind.href ? generateUrl(fillRowTemplate(kind.href, { ...object, id })) : '',
@@ -1372,7 +1398,7 @@ function searchSource(config = {}, context = {}) {
 		loading: () => state.loading,
 
 		columns: withColumnWidths([
-			{ key: 'title', label: t('nextcloud-vue', 'Result'), secondary: 'subtitle', sortable: true },
+			{ key: 'title', label: t('nextcloud-vue', 'Result'), secondary: 'subtitle', sortable: true, ...(config && config.titleWrap === true ? { cellClass: 'cn-cell--wrap' } : {}) },
 			// `kindAsText`: what one row is, as plain text ("Zaak", "Lantaarnpaal",
 			// DqZoekresultaten), instead of the plural kind as a pill.
 			config && config.kindAsText === true
@@ -1619,10 +1645,10 @@ function usersSource() {
 		loading: () => state.loading,
 
 		columns: [
-			{ key: 'displayname', label: t('nextcloud-vue', 'Employee'), secondary: 'function' },
-			{ key: 'roles', label: t('nextcloud-vue', 'Roles') },
-			{ key: 'email', label: t('nextcloud-vue', 'E-mail') },
-			{ key: 'today', label: t('nextcloud-vue', 'Today'), widget: 'badge', widgetProps: { colorMap: presenceColors, variant: 'warning' } },
+			{ key: 'displayname', label: t('nextcloud-vue', 'Employee'), secondary: 'function', sortable: true, cellClass: 'cn-cell--lead' },
+			{ key: 'roles', label: t('nextcloud-vue', 'Roles'), sortable: true },
+			{ key: 'email', label: t('nextcloud-vue', 'E-mail'), sortable: true },
+			{ key: 'today', label: t('nextcloud-vue', 'Today'), widget: 'badge', widgetProps: { colorMap: presenceColors, variant: 'warning' }, sortable: true },
 		],
 
 		searchFields: {

package/src/css/dialog.css

@@ -177,11 +177,14 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	color: var(--color-text-maxcontrast);
 }
 
-/* The saved-view edit and share forms start 22px under the subtitle, as
-   the Dq dialog boards draw a first field: the body's 16px gap and 6px. */
+/* A body starts 22px under the subtitle, as the Dq dialog boards draw a
+   first field: the header's foot and the body gap alone, so the saved-view
+   edit and share forms and the confirm sentence pad nothing on top
+   (r29 on :8080: 28, 28 and 26px with their own padding). */
 .cn-dialog-board .dialog__content .cn-edit-view,
-.cn-dialog-board .dialog__content .cn-share-view {
-	padding-top: 6px;
+.cn-dialog-board .dialog__content .cn-share-view,
+.cn-dialog-board .dialog__content .cn-confirm__confirm {
+	padding-top: 0;
 }
 
 /* The close button is a 36px circle. NcButton sizes an icon-only button by
@@ -218,7 +221,9 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
    10px 14px padding, the checkbox row at the 24px minimum target instead of
    NcCheckboxRadioSwitch's 34px, the note at 1.2 line height; the card's
    corners 8px and the label on an 18px line, as the board draws them. */
-.cn-dialog-board .cn-assign-dialog__toggle {
+/* `.dialog` outranks the component's scoped rule (class + attribute), which
+   loads after this sheet and kept 12px 14px and 12px corners on :8080 (r29). */
+.cn-dialog-board .dialog .cn-assign-dialog__toggle {
 	padding: 10px 14px;
 	border-radius: 8px;
 }
@@ -272,6 +277,13 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	border-top: 1px solid var(--color-border);
 }
 
+/* NcDialog's scoped `.dialog__actions[data-v-…]` margin (6px 0 12px) has the
+   rule above's specificity and, loaded later, put the footer 6px low under the
+   body (DqVolgendeStap). This one outranks it. */
+.cn-dialog-board .dialog .dialog__actions {
+	margin: 0;
+}
+
 .cn-dialog-board .dialog__actions .button-vue,
 .cn-dialog-board .dialog__actions button {
 	min-height: var(--cn-board-control-height, 40px);
@@ -347,10 +359,14 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
    border and radius 8 (PlanItemDialog, DqWerkvoorraad). NcInputField draws
    its border as a 65%-transparent shadow, which on the white dialog read as
    an empty band, and floats its label inside the border. A field with
-   `labelOutside` keeps the app's own label and takes the same control. */
+   `labelOutside` keeps the app's own label and takes the same control. The
+   label's box starts where the field starts and the control 23px under it,
+   as on every dialog board (72 fields on 11 boards): the label at the font's
+   normal line, 21px of room plus the control's 2px focus inset, the label
+   4px above that room's end. */
 .cn-dialog-board .dialog__content .input-field:has(.input-field__label),
 .cn-dialog-board .dialog__content .textarea:has(.textarea__label) {
-	margin-block-start: 26px;
+	margin-block-start: 21px;
 }
 
 /* NcSelect's search is an NcInputField inside the select, and the select's
@@ -359,7 +375,7 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
    select makes the label's room instead.
    @spec openspec/changes/board-dialog-select-label-room/specs/board-dialog-select-label-room/spec.md#requirement-a-board-dialog-select-makes-room-for-its-raised-label */
 .cn-dialog-board .dialog__content .v-select:has(.input-field__label) {
-	margin-block-start: 26px;
+	margin-block-start: 21px;
 }
 
 /* A select in a form dialog sits under its label and over its help line
@@ -420,7 +436,7 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	color: var(--color-main-text);
 	font-size: var(--cn-field-label-size, 14px);
 	font-weight: 600;
-	line-height: 20px;
+	line-height: normal;
 	pointer-events: auto;
 	transition: none;
 }