fix: horizontal resource table scroll

[JammingBen]

Description

Prevents resource tables from being horizontally scrollable for a11y reasons. Instead, information that is available elsewhere will get hidden on smaller displays.

Related Issue

• Works towards [a11y] 9.1.4.10 Break content #10728

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Technical debt
• Tests
• Documentation
• Maintenance (e.g. dependency updates or tooling)

[kulmann]

ftr I changed the PR description from fixes to works towards because I found another issue. We need to check first if that needs to be fixed as well...

[kulmann]

Can we make sure that all action buttons above the file list are one row and break into the next line from the beginning? Also, line break only kind of works if I shrink the browser width even further, see screenshot (where you can actually see both of my issues):

[kulmann]

Can we have some margin-bottom on the filters?

[kulmann]

Spaces overview still scrolls horizontally:

[JammingBen]

Can we make sure that all action buttons above the file list are one row and break into the next line from the beginning?

Yes I can do that, but selection will be jumpy then because we add new vertical space that wasn't there before.

Also, line break only kind of works if I shrink the browser width even further, see screenshot (where you can actually see both of my issues):

It's fine with the smallest pre-setting of the browser, no? We should have a limit IMO, nobody uses a screen <320px. If we really want to support that, I feel like this is a separate story. Edit: Ah, but there is a difference between dev mode and production build - again 😬 With production build, it still shows allows horizontal scroll.

Can we have some margin-bottom on the filters?

I discussed that with @tbsbdr : it's not that easy because it's just a flex-wrap. So it would need a hand-crafted solution.

In general I thought the goal of this issue is to make it a11y-conform. Making things actually look nice on small screens is certainly possible, but we would need to allocate a lot more time for that.

Spaces overview still scrolls horizontally:

I can't reproduce that 🤔 What's your vertical screen size?

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[JammingBen]

@kulmann I fixed the horizontal scroll for production build, can you please check if the spaces page is still scrollable?

For the breadcrumbs, as discussed, let's not solve this via a new line because it's too jumpy. This could be solved via a context menu, but not in the scope of this.

[kulmann]

Works good now 👍 When I navigate to the spaces overview while having 100% and then zooming in to 400% breaks the spaces overview, but it works fine on page reload then.