SplitLayout scroller issue

I’ve a split layout and in the primary component, there is a Horizontal Layout and then a Grid. The issue is, when adding this HL, it is creating a scroll bar which I do not need. Both HL and Grid are set to 100% width but still the scroll bar is there. How to fix this?

In Desktop view, it is how it looks

Converted this from SplitLayout to HorizontalLayout so the scorroller issue is gone but the primaryContent searchBox is still looking ugly.

If you want the text-field to shrink below the default size (192px) you can reset this variable. It’s recommended to scope that change using a classname not to affect all fields.

.tiny-field {
  --vaadin-field-default-width: 100%;

Alternatively you could set overflow: hidden; on some container on the left side.
From Java it can be done with


You can also try changing the text field’s minimum width: