Truncate long names in Access modal [SCI-10273]

app/javascript/vue/shared/access_modal/assign_flyout.vue

@@ -3,7 +3,7 @@
     <div class="sci-label mb-2">
       {{ i18n.t('access_permissions.partials.new_assignments_form.grant_access') }}
     </div>
-    <GeneralDropdown @open="$emit('assigningNewUsers', true)" @close="$emit('assigningNewUsers', false)" :fieldOnlyOpen="true">
+    <GeneralDropdown @open="$emit('assigningNewUsers', true)" @close="$emit('assigningNewUsers', false)" :fieldOnlyOpen="true" :fixed-width="true">
       <template v-slot:field>
         <div class="sci-input-container-v2 left-icon">
           <input type="text" v-model="query" class="sci-input-field"
@@ -31,14 +31,13 @@
           ></MenuDropdown>
         </div>
         <perfect-scrollbar class="h-80 relative">
-          <div v-for="user in filteredUsers" :key="user.id" class="py-2 flex items-center gap-2">
+          <div v-for="user in filteredUsers" :key="user.id" class="py-2 flex items-center w-full">
             <div>
               <img :src="user.attributes.avatar_url" class="rounded-full w-8 h-8">
             </div>
-            <div>
-              {{
-                `${user.attributes.name}${user.attributes.current_user ? ` (${i18n.t('access_permissions.you')})` : ''}`
-              }}
+            <div class="truncate ml-2" :title="user.attributes.name">{{ user.attributes.name }}</div>
+            <div v-if="user.attributes.current_user" class="text-nowrap">
+              {{ `(${i18n.t('access_permissions.you')})` }}
             </div>
             <MenuDropdown
               class="ml-auto"

app/javascript/vue/shared/access_modal/edit.vue

@@ -31,10 +31,13 @@
         <div>
           <img :src="userAssignment.attributes.user.avatar_url" class="rounded-full w-8 h-8">
         </div>
-        <div>
-          <div>{{ userAssignment.attributes.user.name }}</div>
-          <div class="text-xs text-sn-grey">{{ userAssignment.attributes.inherit_message }}</div>
+        <div class="truncate"
+             :title="userAssignment.attributes.user.name"
+        >{{ userAssignment.attributes.user.name }}</div>
+        <div v-if="userAssignment.attributes.current_user" class="text-nowrap">
+          {{ `(${i18n.t('access_permissions.you')})` }}
         </div>
+        <div class="text-xs text-sn-grey text-nowrap">{{ userAssignment.attributes.inherit_message }}</div>
         <MenuDropdown
           v-if="!userAssignment.attributes.last_owner && params.object.urls.update_access"
           class="ml-auto"

app/javascript/vue/shared/general_dropdown.vue

@@ -36,7 +36,8 @@ export default {
     caret: { type: Boolean, default: false },
     alwaysShow: { type: Boolean, default: false },
     closeDropdown: { type: Boolean, default: false },
-    fieldOnlyOpen: { type: Boolean, default: false }
+    fieldOnlyOpen: { type: Boolean, default: false },
+    fixedWidth: { type: Boolean, default: false }
   },
   data() {
     return {

app/serializers/user_assignment_serializer.rb

@@ -5,6 +5,7 @@ class UserAssignmentSerializer < ActiveModel::Serializer
   include Rails.application.routes.url_helpers
 
   attributes :id, :assigned, :assignable_type, :user, :user_role, :last_owner, :inherit_message
+  attribute :current_user
 
   def assigned
     parent_assignment(parent).assigned
@@ -15,16 +16,17 @@ class UserAssignmentSerializer < ActiveModel::Serializer
   end
 
   def user
-    current_user = instance_options[:user]
-    name = object.user.name
-    name += " (#{I18n.t('access_permissions.you')})" if current_user == object.user
     {
       id: object.user.id,
-      name: name,
+      name: object.user.name,
       avatar_url: avatar_path(object.user, :icon_small)
     }
   end
 
+  def current_user
+    instance_options[:user].id == object.user.id
+  end
+
   def user_role
     {
       id: object.user_role.id,