Make slugfield scrollable

[PeterNerlich]

Short description

Make slugfield usable, even if URI prefix is very long.

Proposed changes

• make slugfield scrollable by setting overflow: auto on the container
• ensure input is never at 0 width
• reduce label opacity to $\frac{2}{3}$ for better distinction from input

Side effects

• Other places using .slug-field will be affected. We estimate this to be fine.

Resolved issues

Fixes: #1552 (Slug field layout broken when permalink is too long)

---

Pull Request Review Guidelines

[codeclimate]

Code Climate has analyzed commit e97bc26 and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 100.0% (50% is the threshold).

This pull request will bring the total coverage in the repository to 74.8% (0.0% change).

View more on Code Climate.

[MizukiTemma]

Thank you for PR 👍

I guess the issue number mensioned in the PR description is not correct...

[timobrembeck]

Thanks a lot, this fixes the issue! 👍

Could you add a changelog entry for this?

If the slug itself is longer than the input field, we have a "stacked" scrolling now, I was wondering whether we could combine this, so that the input field automatically grows when longer slugs are entered so we only have one layer of scrolling, but I can imagine this is probably a bit complicated, so only improve this if it doesn't cost you too much time 😅
I'm already happy with the current solution! 👍

I guess the issue number mensioned in the PR description is not correct...

True, I fixed it

[timobrembeck]

Oh, and just a minor addition to my comment:
Please separate the commit subject from body with a blank line, commit subjects with more than 72 characters are a bit hard to read:

So I would use e.g. the following commit message instead:

Make slugfield scrollable

- Make slugfield scrollable by setting `overflow: auto` on the container
- Ensure `input` is never at 0 width
- Reduce label opacity to 60% for better distinction from input

[charludo]

LGTM, thanks!

[PeterNerlich]

If the slug itself is longer than the input field, we have a "stacked" scrolling now, I was wondering whether we could combine this, so that the input field automatically grows when longer slugs are entered so we only have one layer of scrolling, but I can imagine this is probably a bit complicated [...]

Yes, that is not possible without using JS/TypeScript magic that might act differently for different browsers, and since it would add probably quite a bunch of complexity and we don't have a very clear structure where this logic resides and how it is tested, if at all (at least that we know of), Ingo strongly favoured not investing more time, and I agree. I would have ideas how to hack it, though.

[timobrembeck]

Ingo strongly favoured not investing more time, and I agree.

Sounds reasonable! Yes, this leaves us with the changelog entry and the commit message.

[timobrembeck]

👍