Scroller does not honor focus-ring

[knoobie]

Description

Placing a field inside a scroller results in non-visible / cut focus-ring.

Expected outcome

focus-ring is not cut.

Minimal reproducible example

html { --lumo-input-field-pointer-focus-visible: 1; }

var field = new TextField("Textfield with border");
field.focus();
var scroller = new Scroller(field);
scroller.getStyle().setMaxWidth("fit-content"); // used to show the "cut" on both sides
add(scroller);

Steps to reproduce

1. Execute Code.

Environment

Vaadin version(s): 24.9.x
OS: MacOS / FF

[web-padawan]

Similar issue for vaadin-board: #494

[yuriy-fix]

The issue comes from the fact that the scroller doesn't have default padding, and the field has a box-shadow outline used within a directional overflow container at the same time. This cannot be worked around unless we provide default padding, which is probably not the best idea for the scroller component.

[yuriy-fix]

We could consider enhancing the documentation to mention it.

[jouni]

Can be partially fixed by applying overflow:auto only when the content actually overflows the container.