Allow tasks list to use full width #3352

New Issue

Bouni · 2023-04-05T06:17:23Z

Bouni commented

2023-04-05 06:17:23 +00:00

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.

**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](/attachments/36ff4bc1-71c5-4441-8c8c-10c76882f5ea)

grafik.png

69 KiB

konrad commented

2023-04-05 06:53:26 +00:00

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?

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?

konrad commented

2023-04-05 06:55:55 +00:00

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?

This doesn't look too bad: ![image](/attachments/cfad9bff-a56c-4349-aa2a-c618f9d37136) I think on an ultrawide screen it's too much though: ![image](/attachments/c4b537cd-68b4-4cb7-b8f9-49b18d2fc8c6) Maybe we could just increase that 1024px max-width to something like 1500?

image.png

31 KiB

image.png

40 KiB

Bouni commented

2023-04-05 07:16:17 +00:00

Poster

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 ...

I did a test and 1800px looks better for me on a 2560x1440 screen 😄 ![grafik](/attachments/7664adf1-f07f-4539-9cfd-cd23442082f0) 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 ...

grafik.png

92 KiB

konrad commented

2023-04-05 07:18:15 +00:00

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%.

> 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%.

konrad commented

2023-04-05 07:19:18 +00:00

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.

> 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

2023-04-05 08:59:19 +00:00

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.

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

2023-04-05 09:01:57 +00:00

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.

> I did a test and 1800px looks better for me on a 2560x1440 screen 😄 > > ![grafik](/attachments/7664adf1-f07f-4539-9cfd-cd23442082f0) 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

2023-04-05 09:03:56 +00:00

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.

> 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

2023-04-05 10:00:08 +00:00

Poster

@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!

@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

2023-04-05 10:03:20 +00:00

Poster

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!?

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](/attachments/4fcebeae-cf6b-47ef-a745-71c509b5111f) But in the details of that task they are semi-stacked: ![grafik](/attachments/4608f33c-5619-487b-958c-77037f01eec1) The stacked version is in my opinion what should be used in the list view as well. Maybe thats a bug!?

grafik.png

4.4 KiB

grafik.png

7.5 KiB

✅ 1

konrad commented

2023-04-05 11:17:38 +00:00

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: #3354

> 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

🚀 1

Sign in to join this conversation.