fix(ui): let select dropdowns paint above what follows them

package.json

@@ -41,7 +41,7 @@
 		"@nextcloud/initial-state": "^2.2.0",
 		"@nextcloud/l10n": "^3.4.1",
 		"@nextcloud/router": "^3.1.0",
-		"@nextcloud/vue": "~9.9.0",
+		"@nextcloud/vue": "^9.11.0",
 		"dexie": "^4.4.5",
 		"dompurify": "^3.4.14",
 		"gridstack": "^12.2.1",

src/components/Widgets/VisibilityRuleRow.vue

@@ -708,4 +708,30 @@ export default {
 	gap: 8px;
 	justify-content: flex-end;
 }
+
+/*
+ * The open select dropdown must paint ABOVE the row's action buttons.
+ *
+ * The row is a flex column: fields first, actions after. An NcSelect
+ * dropdown opens downward out of the fields block and lands over the
+ * actions, and because the actions are a LATER sibling with no stacking
+ * context of their own, they win and swallow the click.
+ *
+ * @nextcloud/vue 9.10 made this reachable by giving NcSelect a floating
+ * label (#8570), which makes the control taller and pushes the dropdown
+ * further down -- far enough to reach the actions. The Playwright trace
+ * names the interception exactly:
+ *
+ *   - locator resolved to <li class="vs__dropdown-option">
+ *   - attempting click action
+ *     - element is visible, enabled and stable
+ *     - <div class="visibility-rule-row__actions"> ... intercepts pointer events
+ *
+ * The option was never unstable; it was covered. Giving the fields their
+ * own stacking context puts the dropdown back on top.
+ */
+.visibility-rule-row__fields {
+	position: relative;
+	z-index: 1;
+}
 </style>

src/modals/DashboardConfigModal.vue

@@ -136,7 +136,7 @@
 				class="dashboard-config__panel">
 				<div
 					v-if="!isCreate && canManageShares"
-					class="dashboard-config__field">
+					class="dashboard-config__field dashboard-config__field--select">
 					<label class="dashboard-config__label">
 						{{ t('launchpad', 'Share with users and groups') }}
 					</label>
@@ -1151,6 +1151,57 @@ export default {
 	gap: 6px;
 }
 
+/*
+ * The sharee dropdown must paint ABOVE the fields that follow it.
+ *
+ * The modal body is a column of `__field` blocks. An NcSelect dropdown
+ * opens downward out of its field and lands over the next ones, and
+ * because those are LATER siblings with no stacking context of their own,
+ * they win and swallow the click.
+ *
+ * @nextcloud/vue 9.10 made this reachable by giving NcSelect a floating
+ * label (#8570): the control is taller, so the dropdown reaches further
+ * down. The Playwright trace names the interceptors exactly:
+ *
+ *   - locator resolved to <span class="sharee-option">
+ *   - attempting click action
+ *     - element is visible, enabled and stable
+ *     - <div class="dashboard-config__field dashboard-config__public"> ...
+ *     - <p class="dashboard-config__hint">Not shared with anyone yet.</p> ...
+ *
+ * The option was never unstable; it was covered. Only the field holding a
+ * select is raised, so nothing else changes.
+ */
+.dashboard-config__field--select {
+	position: relative;
+	z-index: 2;
+}
+
+/*
+ * A field holding an NcSelect must paint ABOVE the fields that follow it.
+ *
+ * The modal is a column of fields. An NcSelect dropdown opens downward out
+ * of its own field and lands over the next one; those are LATER siblings
+ * with no stacking context, so they win and swallow the click.
+ *
+ * @nextcloud/vue 9.10 made this reachable by giving NcSelect a floating
+ * label (#8570), which makes the control taller and pushes the dropdown
+ * far enough down to reach them. The Playwright trace names the
+ * interception rather than leaving it to be guessed:
+ *
+ *   - locator resolved to <span class="sharee-option">
+ *   - attempting click action
+ *     - element is visible, enabled and stable
+ *     - <p class="dashboard-config__hint">Not shared with anyone yet.</p>
+ *       ... intercepts pointer events
+ *
+ * The option was never unstable; it was covered.
+ */
+.dashboard-config__field--select {
+	position: relative;
+	z-index: 2;
+}
+
 .dashboard-config__label {
 	font-size: 13px;
 	font-weight: 600;