feat: display assignee names on mobile for accessibility (#1828)

Fixes https://github.com/go-vikunja/vikunja/issues/1741

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: kolaente <13721712+kolaente@users.noreply.github.com>
Co-authored-by: kolaente <k@knt.li>

frontend/src/components/tasks/partials/AssigneeList.vue

@@ -34,7 +34,7 @@ defineEmits<{
 			<User
 				:key="'user'+user.id"
 				:avatar-size="avatarSize"
-				:show-username="false"
+				:show-username="true"
 				:user="user"
 				:class="{'m-2': canRemove && !disabled}"
 			/>
@@ -54,13 +54,39 @@ defineEmits<{
 .assignees-list {
 	display: flex;
 
-	&.is-inline :deep(.user) {
-		display: inline;
-	}
-
 	&:hover .assignee:not(:first-child) {
 		margin-inline-start: -0.5rem;
 	}
+
+	// Hide usernames on desktop, show on mobile
+	:deep(.user .username) {
+		@media screen and (min-width: $tablet) {
+			display: none;
+		}
+
+	}
+
+	:deep(.user) {
+		display: flex;
+		align-content: center;
+  		align-items: center;
+  		gap: .5rem;
+	}
+
+	:deep(.user > .username) {
+		font-size: .75rem;
+	}
+
+	&.is-inline {
+		:deep(.user) {
+			display: inline;
+			text-wrap: nowrap;
+		}
+
+		:deep(.user > .username) {
+			margin-inline-start: .5rem;
+		}
+	}
 }
 
 .assignee {
@@ -83,7 +109,6 @@ defineEmits<{
 	inset-inline-start: 2px;
 	color: var(--danger);
 	background: var(--white);
-	padding: 0 4px;
 	display: block;
 	border-radius: 100%;
 	font-size: .75rem;

frontend/src/views/labels/ListLabels.vue

@@ -42,7 +42,10 @@
 						class="label-edit-button is-small"
 						@click.stop.prevent="editLabel(label)"
 					>
-						<Icon icon="pen" class="icon"/>
+						<Icon
+							icon="pen"
+							class="icon"
+						/>
 					</BaseButton>
 				</RouterLink>
 			</div>