Merge pull request #40902 from nextcloud/fix/36965-fix-nc-select-on-users-table

Append to body all selects inside of user table

apps/settings/src/components/Users/UserRow.vue

@@ -123,6 +123,7 @@
 					:disabled="isLoadingField"
 					:loading="loading.groups"
 					:multiple="true"
+					:append-to-body="false"
 					:options="availableGroups"
 					:placeholder="t('settings', 'Add user to group')"
 					:taggable="settings.isAdmin"
@@ -152,6 +153,7 @@
 					:disabled="isLoadingField"
 					:loading="loading.subadmins"
 					label="name"
+					:append-to-body="false"
 					:multiple="true"
 					:no-wrap="true"
 					:options="subAdminsGroups"
@@ -177,6 +179,7 @@
 					:create-option="validateQuota"
 					:disabled="isLoadingField"
 					:loading="loading.quota"
+					:append-to-body="false"
 					:clearable="false"
 					:input-id="'quota' + uniqueId"
 					:options="quotaOptions"
@@ -208,6 +211,7 @@
 					:disabled="isLoadingField"
 					:loading="loading.languages"
 					:clearable="false"
+					:append-to-body="false"
 					:options="availableLanguages"
 					:placeholder="t('settings', 'No language set')"
 					:value="userLanguage"
@@ -249,6 +253,7 @@
 					:input-id="'manager' + uniqueId"
 					:close-on-select="true"
 					:disabled="isLoadingField"
+					:append-to-body="false"
 					:loading="loadingPossibleManagers || loading.manager"
 					label="displayname"
 					:options="possibleManagers"
@@ -900,7 +905,6 @@ export default {
 
 .user-list__row {
 	@include row;
-	border-bottom: 1px solid var(--color-border);
 
 	&:hover {
 		background-color: var(--color-background-hover);
@@ -920,6 +924,8 @@ export default {
 	@include cell;
 
 	&__cell {
+		border-bottom: 1px solid var(--color-border);
+
 		:deep {
 			.input-field,
 			.input-field__main-wrapper,

apps/settings/src/components/Users/VirtualList.vue

@@ -168,6 +168,7 @@ export default Vue.extend({
 	--cell-width: 200px;
 	--cell-width-large: 300px;
 	--cell-min-width: calc(var(--cell-width) - (2 * var(--cell-padding)));
+	--sticky-column-z-index: calc(var(--vs-dropdown-z-index) + 1); // Keep the sticky column on top of the select dropdown
 
 	// Necessary for virtual scroll optimized rendering
 	display: block;
@@ -183,7 +184,7 @@ export default Vue.extend({
 
 	&__header {
 		top: 0;
-		z-index: 20;
+		z-index: calc(var(--sticky-column-z-index) + 1);
 	}
 
 	&__footer {

apps/settings/src/components/Users/shared/styles.scss

@@ -52,7 +52,7 @@
 			&--avatar,
 			&--displayname {
 				position: sticky;
-				z-index: 10;
+				z-index: var(--sticky-column-z-index);
 				background-color: var(--color-main-background);
 			}
 
@@ -106,7 +106,7 @@
 		&--actions {
 			position: sticky;
 			right: 0;
-			z-index: 10;
+			z-index: var(--sticky-column-z-index);
 			display: flex;
 			flex-direction: row;
 			align-items: center;