[PR #1828] [MERGED] feat: display assignee names on mobile for accessibility #5259

Closed
opened 2026-04-16 13:32:11 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/go-vikunja/vikunja/pull/1828
Author: @Copilot
Created: 11/15/2025
Status: Merged
Merged: 11/16/2025
Merged by: @kolaente

Base: mainHead: copilot/show-assignee-name-on-mobile


📝 Commits (4)

📊 Changes

2 files changed (+35 additions, -7 deletions)

View changed files

📝 frontend/src/components/tasks/partials/AssigneeList.vue (+31 -6)
📝 frontend/src/views/labels/ListLabels.vue (+4 -1)

📄 Description

Assignee names are currently only visible on hover, making them inaccessible on mobile devices where hover interactions don't exist.

Changes

  • Set :show-username="true" in AssigneeList.vue to render usernames in the DOM
  • Added media query to hide usernames on desktop (≥769px) while showing on mobile (<769px)
// Hide usernames on desktop, show on mobile
:deep(.user .username) {
  @media screen and (min-width: $tablet) {
    display: none;
  }
}

This maintains the current desktop UX (tooltip on hover) while fixing mobile accessibility.

Screenshots

Desktop (≥769px) - Usernames hidden, tooltip on hover
Desktop view

Mobile (<769px) - Usernames always visible
Mobile view

Fixes #1741

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • download.cypress.io
    • Triggering command: node index.js --exec install (dns block)
  • googlechromelabs.github.io
    • Triggering command: node install.mjs (dns block)
  • https://storage.googleapis.com/chrome-for-testing-public/131.0.6778.204/linux64/chrome-headless-shell-linux64.zip
    • Triggering command: node install.mjs (http block)

If you need me to access, download, or install something from one of these locations, you can either:

Original prompt

On mobile, show the name of an assignee https://github.com/go-vikunja/vikunja/issues/1741


Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/go-vikunja/vikunja/pull/1828 **Author:** [@Copilot](https://github.com/apps/copilot-swe-agent) **Created:** 11/15/2025 **Status:** ✅ Merged **Merged:** 11/16/2025 **Merged by:** [@kolaente](https://github.com/kolaente) **Base:** `main` ← **Head:** `copilot/show-assignee-name-on-mobile` --- ### 📝 Commits (4) - [`bff0efe`](https://github.com/go-vikunja/vikunja/commit/bff0efe1fa5f8efb3522ce6f8f6c18aad4812ec3) Initial plan - [`6690f3a`](https://github.com/go-vikunja/vikunja/commit/6690f3ae0cbca1ae2ff35057af7b680d4510c642) feat: show assignee names on mobile devices for accessibility - [`93cb687`](https://github.com/go-vikunja/vikunja/commit/93cb6871f8bba36ab636fff7ebcb9c89c8eb3579) fix - [`1854cd2`](https://github.com/go-vikunja/vikunja/commit/1854cd2a943e97353315d58074fbafde927bd365) fix: inline ### 📊 Changes **2 files changed** (+35 additions, -7 deletions) <details> <summary>View changed files</summary> 📝 `frontend/src/components/tasks/partials/AssigneeList.vue` (+31 -6) 📝 `frontend/src/views/labels/ListLabels.vue` (+4 -1) </details> ### 📄 Description Assignee names are currently only visible on hover, making them inaccessible on mobile devices where hover interactions don't exist. ## Changes - Set `:show-username="true"` in `AssigneeList.vue` to render usernames in the DOM - Added media query to hide usernames on desktop (≥769px) while showing on mobile (<769px) ```vue // Hide usernames on desktop, show on mobile :deep(.user .username) { @media screen and (min-width: $tablet) { display: none; } } ``` This maintains the current desktop UX (tooltip on hover) while fixing mobile accessibility. ## Screenshots **Desktop (≥769px)** - Usernames hidden, tooltip on hover ![Desktop view](https://github.com/user-attachments/assets/e757cad9-44bf-4648-8e5d-51b2adfd4658) **Mobile (<769px)** - Usernames always visible ![Mobile view](https://github.com/user-attachments/assets/11055bed-fc7e-422a-afb1-417fb6f99f53) Fixes #1741 > [!WARNING] > > <details> > <summary>Firewall rules blocked me from connecting to one or more addresses (expand for details)</summary> > > #### I tried to connect to the following addresses, but was blocked by firewall rules: > > - `download.cypress.io` > - Triggering command: `node index.js --exec install` (dns block) > - `googlechromelabs.github.io` > - Triggering command: `node install.mjs` (dns block) > - `https://storage.googleapis.com/chrome-for-testing-public/131.0.6778.204/linux64/chrome-headless-shell-linux64.zip` > - Triggering command: `node install.mjs` (http block) > > If you need me to access, download, or install something from one of these locations, you can either: > > - Configure [Actions setup steps](https://gh.io/copilot/actions-setup-steps) to set up my environment, which run before the firewall is enabled > - Add the appropriate URLs or hosts to the custom allowlist in this repository's [Copilot coding agent settings](https://github.com/go-vikunja/vikunja/settings/copilot/coding_agent) (admins only) > > </details> <!-- START COPILOT CODING AGENT SUFFIX --> <details> <summary>Original prompt</summary> > On mobile, show the name of an assignee https://github.com/go-vikunja/vikunja/issues/1741 </details> <!-- START COPILOT CODING AGENT TIPS --> --- ✨ Let Copilot coding agent [set things up for you](https://github.com/go-vikunja/vikunja/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot) — coding agent works faster and does higher quality work when set up for your repo. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-16 13:32:11 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/vikunja#5259