chore: Design improvements for thumbnail and dropdown (#5822)

app/javascript/dashboard/components/widgets/Avatar.vue

@@ -48,5 +48,6 @@ export default {
   text-align: center;
   background-image: linear-gradient(to top, var(--w-100) 0%, var(--w-75) 100%);
   color: var(--w-600);
+  cursor: default;
 }
 </style>

app/javascript/dashboard/components/widgets/Thumbnail.vue

@@ -1,5 +1,9 @@
 <template>
-  <div :class="thumbnailBoxClass" :style="{ height: size, width: size }">
+  <div
+    :class="thumbnailBoxClass"
+    :style="{ height: size, width: size }"
+    :title="title"
+  >
     <!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements.  -->
     <img
       v-show="shouldShowImage"
@@ -72,6 +76,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    title: {
+      type: String,
+      default: '',
+    },
     variant: {
       type: String,
       default: 'circle',

app/javascript/dashboard/components/widgets/ThumbnailGroup.vue

@@ -3,11 +3,13 @@
     <thumbnail
       v-for="user in usersList"
       :key="user.id"
+      v-tooltip="user.name"
+      :title="user.name"
       :src="user.thumbnail"
       :username="user.name"
       :has-border="true"
       :size="size"
-      class="overlapping-thumbnail"
+      :class="`overlapping-thumbnail gap-${gap}`"
     />
     <span v-if="showMoreThumbnailsCount" class="thumbnail-more-text">
       {{ moreThumbnailsText }}
@@ -38,6 +40,14 @@ export default {
       type: String,
       default: '',
     },
+    gap: {
+      type: String,
+      default: 'normal',
+      validator(value) {
+        // The value must match one of these strings
+        return ['normal', '', 'tight'].includes(value);
+      },
+    },
   },
 };
 </script>
@@ -52,6 +62,10 @@ export default {
   box-shadow: var(--shadow-small);
 
   &:not(:first-child) {
+    margin-left: var(--space-minus-smaller);
+  }
+
+  .gap-tight {
     margin-left: var(--space-minus-small);
   }
 }