The name of a To-do item is not visible fully when on mobile #97

New issue

Closed

opened 2026-02-27 14:52:15 -05:00 by deekerman · 0 comments

deekerman commented

2026-02-27 14:52:15 -05:00

Owner

Originally created by @kwiniarski97 on GitHub (Oct 24, 2022).

Description

PROBLEM
When on mobile resolutions, longer tasks name are not fully visible. The name of the tickets is truncated and ellipsis is added. I don't think this is (or should be) intended behavior. It is cumbersome to read any To-do tasks when they have a bit longer tasks names. Take a look a the screenshot. It has been taken on try.vikunja.io

PROPOSED SOLUTION
I believe a better approach would be to wrap the text rather than to cut it short. This is e.g. how MS TODO looks like:

The solution itself seems rather simple as you would need to change the CSS of .task .tasktext by removing those two properties:

  white-space: nowrap;
  text-overflow: ellipsis;

Vikunja Frontend Version

try.vikunja.io (doesn't show version)

Vikunja API Version

v0.19.2+88-f5fd849a0b

Browser and version

firefox 105.0.3 (reproductible on other browsers too)

Can you reproduce the bug on the Vikunja demo site?

Yes

Screenshots

Already included in ticket.

Version of app:

Originally created by @kwiniarski97 on GitHub (Oct 24, 2022). ### Description **PROBLEM** When on mobile resolutions, longer tasks name are not fully visible. The name of the tickets is truncated and ellipsis is added. I don't think this is (or should be) intended behavior. It is cumbersome to read any To-do tasks when they have a bit longer tasks names. Take a look a the screenshot. It has been taken on try.vikunja.io ![Screen Shot 2022-10-24 at 08 32 31](https://user-images.githubusercontent.com/7727844/197462066-5f0d5926-d56f-44a3-8d5f-d349c2ca71a5.png) **PROPOSED SOLUTION** I believe a better approach would be to wrap the text rather than to cut it short. This is e.g. how MS TODO looks like: ![Screen Shot 2022-10-24 at 08 39 13](https://user-images.githubusercontent.com/7727844/197463029-5fdbeb4e-170e-4c83-8904-51b8f53adcfc.png) The solution itself seems rather simple as you would need to change the CSS of `.task .tasktext` by removing those two properties: ```css white-space: nowrap; text-overflow: ellipsis; ``` ### Vikunja Frontend Version try.vikunja.io (doesn't show version) ### Vikunja API Version v0.19.2+88-f5fd849a0b ### Browser and version firefox 105.0.3 (reproductible on other browsers too) ### Can you reproduce the bug on the Vikunja demo site? Yes ### Screenshots Already included in ticket. Version of app: ![image](https://user-images.githubusercontent.com/7727844/197464028-49b5177f-a1ab-4456-ae8d-6d64ea86020b.png)

deekerman

2026-02-27 14:52:15 -05:00

closed this issue
added the
enhancement
label

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/vikunja-go-vikunja#97

No description provided.

Rows
Columns