fix: Stack title overflows into cards for read-only board members

Open Beginner friendly
#7,980 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
1/5
Estimated time
Under an hour
Newbie friendliness
88/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Quiet
Tech stack
javascript
Domain
frontend

Research direction

Start in src/components/board/Stack.vue and compare the two h3 branches for manageable and read-only or archived boards, checking how the title styles differ. Reproduce with a long list title on a read-only or archived board, then verify the title stays on one line with an ellipsis without overlapping the cards.

Written by the indexing model from the issue text.

Description

1. to develop bug

Bug description

For users with read-only access to a board (canManage = false) or on archived boards, the list/stack column header title wraps to multiple lines and visually overlaps the cards below it. Users with manage rights see the title correctly truncated with ….

Steps to reproduce

  1. Share a board with a user as read-only (no manage rights)
  2. Log in as that user and open the board
  3. The board must have at least one list with a long title

Result: Title wraps to multiple lines and overlaps the cards.
Expected: Title is truncated to a single line with …

Root cause

In src/components/board/Stack.vue there are two <h3> branches:

  • Manageable (v-else-if="!editing"): has class="stack__title" → gets white-space: nowrap; overflow: hidden; text-overflow: ellipsis → correct.
  • Read-only / archived (v-if="!canManage || isArchived"): plain <h3> without the class → no overflow constraints → wraps freely.

Environment

  • Affects all browsers (Chrome, Firefox, WebKit)
  • Reproducible on Nextcloud Deck v1.17.1
Dominant language
JavaScript
Stars
1.4k
Forks
354
Avg merge
1d 13h
Merged PRs (30d)
39

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from nextcloud/deck

All issues in nextcloud/deck

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.