vikunja icon indicating copy to clipboard operation
vikunja copied to clipboard

Allow tasks list to use full width

Open vikunja-bot opened this issue 11 months ago • 0 comments

Original issue by Bouni on 2023-04-05T06:17:23.000Z

Version information:

Frontend Version: 0.20.5 API Version: v0.20.4 Browser and OS Version: Firefox 111.0.1 (64-Bit) / Windows 11

Question / Feature request

I wonder why the list view is limited to 1024px where the other layouts (Gant, Table) use the full width? Is that by intention?

I would really like to use the entire with of my screen because some elements are hidden due to the limited size.

grafik

Original issue on Gitea


@kolaente commented on 2023-04-05T06:53:26.000Z:

I think I never questioned the width of that view. It's always been like that.

If we would just make it wider, not sure if that would look nice all the time. I guess let's try it?


@kolaente commented on 2023-04-05T06:55:55.000Z:

This doesn't look too bad:

image

I think on an ultrawide screen it's too much though:

image

Maybe we could just increase that 1024px max-width to something like 1500?


Bouni commented on 2023-04-05T07:16:17.000Z:

I did a test and 1800px looks better for me on a 2560x1440 screen 😄

grafik

What about a percentage or something like 70vw?

I'm far from experienced with CSS so don't hesitate to use whatever units seems best for you!

Edit: is there a breakpoint to determine if we are on a ultrawide screen? If so I would opt for 100% width below ultra wide and something else on ultrawide ...


@kolaente commented on 2023-04-05T07:18:15.000Z:

What about a percentage or something like 70vw?

That might work, but IMHO we should make that the minimum then and keep the 1024px. So that it always takes up 70vw, unless the screen is smaller than 1024px. In that case it should be 100%.


@kolaente commented on 2023-04-05T07:19:18.000Z:

Edit: is there a breakpoint to determine if we are on a ultrawide screen? If so I would opt for 100% width below ultra wide and something else on ultrawide ...

I think there is one called $fullhd at 1344px.


dpschen commented on 2023-04-05T08:59:19.000Z:

Define the max-width as 70ch. That's about the upper limit of the optimal reading line length. If there is more text we should wrap instead.

Regarding full-with: If we do that it should be a toggleable view setting.

EDIT With the 70ch I meant the width of the text inside the item, not the line wrapper.


dpschen commented on 2023-04-05T09:01:57.000Z:

I did a test and 1800px looks better for me on a 2560x1440 screen 😄

grafik

When I saw that I had to immediately think if it wouldn't be better to wrap the meta info per task in a second line instead.


dpschen commented on 2023-04-05T09:03:56.000Z:

Is that by intention?

It's limited by intend. As written we should definitely wrap the text though. I also agree that even wirh the text or meta wrapping it might also profit from a a bit larger max-width.


Bouni commented on 2023-04-05T10:00:08.000Z:

@dpschen

Regarding full-with: If we do that it should be a toggleable view setting.

That would be absolutely perfect if a user could just enable that via the settings!

But also extend from 1024px to 70vw and additionally having meta info in a second line would be super even if full width is disabled!


Bouni commented on 2023-04-05T10:03:20.000Z:

One more thing (not sure if that should go into a separate issue), I juts noticed that the assigned user icons are spaced quite far from each other in the list view:

grafik

But in the details of that task they are semi-stacked:

grafik

The stacked version is in my opinion what should be used in the list view as well. Maybe thats a bug!?


@kolaente commented on 2023-04-05T11:17:38.000Z:

The stacked version is in my opinion what should be used in the list view as well.

I'd say that's a bug. As you pointed out, they should be stacked in the list view as well. Opened an issue from your comment: https://kolaente.dev/vikunja/frontend/issues/3354


Bouni commented on 2023-12-01T13:30:37.000Z:

@dpschen any news on the toggleable view setting or line wrapping?

vikunja-bot avatar Apr 01 '25 11:04 vikunja-bot