Allow tasks list to use full width
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.
@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:
I think on an ultrawide screen it's too much though:
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 😄
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 😄
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:
But in the details of that task they are semi-stacked:
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?