SplitLayout scroller issue

Flow
1

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?

image
image1215×416 47 KB

In Desktop view, it is how it looks
image
image1002×506 8.37 KB

2

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

image
image1260×382 52.7 KB

3

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

layout.addClassName(LumoUtility.Overflow.HIDDEN);
4

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

textField.addClassName(LumoUtility.MinWidth.NONE);