Fix: v1.7.1 frontend visual fixes

[shamoon]

Proposed change

This PR fixes two visual issues reported in v1.7.1, specifically:

• Better handling of the filter editor button layout for languages with long words e.g. German. Since not all buttons can / should have an icon and must keep text we have to wrap buttons, but this is still an improvement over current (see [BUG] dis-arranged buttons in mobile view #931).
• The searchable dropdowns have no visible highlighted state making it appear that keyboard navigation isnt working.
• Button group on large cards cut off on mobile displays due to long words.

Screenshots below to illustrate fixes.

Fixes #931 and #932

Type of change

• 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 not work as expected)
• Other (please explain)

Checklist:

• I have read & agree with the contributing guidelines.
• If applicable, I have tested my code for new features & regressions on both mobile & desktop devices, using the latest version of major browsers.
• If applicable, I have checked that all tests pass, see documentation.
• I have run all pre-commit hooks, see documentation.
• I have made corresponding changes to the documentation as needed.
• I have checked my modifications for any breaking changes.

[sukisoft]

You sir, are amazing!

Big Thx!

[qcasey]

Yeah, I'm seeing now this is a tough balance to strike. Should the same be done for the document buttons for this view (on mobile)?

Although I fear the dots icon alone isn't a clear enough of an indicator for "More like this". Would it make sense to leave "Ähnliche Dokumente" on two lines, and remove the text for the other 3?

EDIT: The dropdown fix works well.

[sukisoft]

Good point. Should be looking similar.

Nur from M point of view, I'd say, on mobile, there only should be buttons instead of text, since I would assume this can be aligned much easier. But I'm definitely not a front end guy. Good Icons will be hard to find though.

[qcasey]

Nur from M point of view, I'd say, on mobile, there only should be buttons instead of text, since I would assume this can be aligned much easier. But I'm definitely not a front end guy. Good Icons will be hard to find though.

I generally agree with this. Ideally the 3 dots icon might open a small menu above with more options, one of them being "Ähnliche Dokumente". I'm not a frontend guy either, but I imagine that's a lot more work than this quick fix intened.

[shamoon]

I can take a look later, yea some things are just compromises, like wrapping buttons. If it works well in many (most) languages its hard to justify making it "worse" for others just to achieve parity, but certainly that screenshot above shouldnt be left as-is. Leave me to it.

[qcasey]

The wrapping is totally fine IMO and a great compromise

[shamoon]

I went back-and-forth about this but ultimately I think the cleanest solution is to go to icon-only on tiny screens, ultimately thats a convention we use elsewhere.

[sukisoft]

Definitely a good solution to the card view to just use icons.

[qcasey]

Perfect, thanks shamoon

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion or issue for related concerns.