feat: Dark Mode (#7471)

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

@@ -6,7 +6,9 @@
       :username="user.name"
       :status="user.availability_status"
     />
-    <h6 class="text-block-title user-name text-truncate text-capitalize">
+    <h6
+      class="text-block-title user-name overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
+    >
       {{ user.name }}
     </h6>
   </div>
@@ -33,12 +35,10 @@ export default {
 
 <style scoped lang="scss">
 .row--user-block {
-  align-items: center;
-  display: flex;
-  text-align: left;
+  @apply items-center flex text-left;
 
   .user-name {
-    margin: 0 var(--space-small);
+    @apply my-0 mx-2 text-slate-700 dark:text-slate-100;
   }
 }
 </style>