From 3c78ab67e13aeb98e0043d9c87ba7ea0b800ee89 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Mon, 11 Aug 2025 13:14:43 +0200
Subject: [PATCH] Css fixes for user groups [SCI-12218]

---
 app/controllers/users/settings/user_groups_controller.rb | 2 +-
 app/javascript/vue/shared/access_modal/edit.vue          | 4 ++--
 app/javascript/vue/shared/select_dropdown.vue            | 8 ++++----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/controllers/users/settings/user_groups_controller.rb b/app/controllers/users/settings/user_groups_controller.rb
index 92dc0c1e5..ec96f9c61 100644
--- a/app/controllers/users/settings/user_groups_controller.rb
+++ b/app/controllers/users/settings/user_groups_controller.rb
@@ -5,7 +5,7 @@ module Users
     class UserGroupsController < ApplicationController
       before_action :load_team
       before_action :set_breadcrumbs_items, only: %i(index show)
-      before_action :check_user_groups_enabled
+      before_action :check_user_groups_enabled, except: :users
       before_action :load_user_group, except: %i(index unassigned_users actions_toolbar create)
       before_action :check_read_permissions, only: %i(index show unassigned_users actions_toolbar users)
       before_action :check_manage_permissions, except: %i(index show unassigned_users actions_toolbar users)
diff --git a/app/javascript/vue/shared/access_modal/edit.vue b/app/javascript/vue/shared/access_modal/edit.vue
index 03f9ab002..be47e43e1 100644
--- a/app/javascript/vue/shared/access_modal/edit.vue
+++ b/app/javascript/vue/shared/access_modal/edit.vue
@@ -54,7 +54,7 @@
           >
         </div>
         <div class="truncate">
-          <div class="flex flex-row gap-2">
+          <div class="flex flex-row gap-2 items-center">
             <div class="truncate"
                 :title="userGroupAssignment.attributes.user_group.name"
             >{{ userGroupAssignment.attributes.user_group.name }}</div>
@@ -114,7 +114,7 @@
           >
         </div>
         <div class="truncate">
-          <div class="flex flex-row gap-2">
+          <div class="flex flex-row gap-2 items-center">
             <div class="truncate"
                 :title="userAssignment.attributes.user.name"
                 :data-e2e="`e2e-TX-${dataE2e}-${userAssignment.attributes.user.name.replace(/\W/g, '')}-name`"
diff --git a/app/javascript/vue/shared/select_dropdown.vue b/app/javascript/vue/shared/select_dropdown.vue
index ab6e4ee66..f95f7a02e 100644
--- a/app/javascript/vue/shared/select_dropdown.vue
+++ b/app/javascript/vue/shared/select_dropdown.vue
@@ -73,7 +73,7 @@
               {{ i18n.t('general.select_all') }}
             </div>
           </div>
-          <perfect-scrollbar ref="scrollContainer" class="p-2.5 flex flex-col max-h-80 relative" :class="{ 'pt-0': withCheckboxes }">
+          <div ref="scrollContainer" class="p-2.5 flex flex-col max-h-80 relative overflow-y-auto" :class="{ 'pt-0': withCheckboxes }">
             <template v-for="(option, i) in filteredOptions" :key="option[0]">
               <div
                 @click.stop="setValue(option[0])"
@@ -99,7 +99,7 @@
             <div v-if="filteredOptions.length === 0" class="text-sn-grey text-center py-2.5">
               {{ noOptionsPlaceholder || this.i18n.t('general.select_dropdown.no_options_placeholder') }}
             </div>
-          </perfect-scrollbar>
+          </div>
         </div>
       </teleport>
     </template>
@@ -276,7 +276,7 @@ export default {
         this.$nextTick(() => {
           this.setPosition();
           this.$refs.search?.focus();
-          this.$refs.scrollContainer.$el.addEventListener('scroll', this.loadNextPage);
+          this.$refs.scrollContainer.addEventListener('scroll', this.loadNextPage);
         });
       }
     },
@@ -296,7 +296,7 @@ export default {
       this.fetchOptions();
     },
     loadNextPage() {
-      const container = this.$refs.scrollContainer.$el;
+      const container = this.$refs.scrollContainer;
       if (this.nextPage && container.scrollTop + container.clientHeight >= container.scrollHeight) {
         this.fetchOptions();
       }