Start implementing mobile behavior for border-box table

[oliverguenther]

Ticket

https://community.openproject.org/work_packages/59248

What are you trying to accomplish?

Trying to have all but the last column in the BorderBoxTableComponent stack on mobile

[HDinger]

Looks nice 👍 While clicking through, I found some issues:

• According to figma: On the meetings page, the project should not display a label in front on mobile
• On the meetings page, there are different vertical spacings between the elements. That happens on all places where an action button is displayed because the first row takes the height of that button. Thus is it is larger and the space appears bigger.

And one minor optional comment:

• Currently, I can enter empty values for the mobile_label and the mobile_columns which does not make much sense I guess. So maybe we should prevent that?

[oliverguenther]

On the meetings page, there are different vertical spacings between the elements. That happens on all places where an action button is displayed because the first row takes the height of that button. Thus is it is larger and the space appears bigger.

Do you have a suggestion on how to fix this?

[oliverguenther]

Currently, I can enter empty values for the mobile_label and the mobile_columns which does not make much sense I guess. So maybe we should prevent that?

If you enter empty mobile_columns, it falls back to showing all columns - which I think is a good default

[HDinger]

On the meetings page, there are different vertical spacings between the elements. That happens on all places where an action button is displayed because the first row takes the height of that button. Thus is it is larger and the space appears bigger.

Do you have a suggestion on how to fix this?

I just pushed a change. The space between the lines is now 4px larger than what is specified in Figma, but imho that is acceptable.

It looks admitedtly a bit weird, when the text spans multiple lines, but I think it is good enough at least for now. We can then discuss next week with the product team what the best approach would look like.

[oliverguenther]

Thanks for looking into it. It's definitely better than before 👍