Grid column not able to accommodate Button

I’m trying to put a text field and a button in a HL and appending this HL to a Grid Header like this. But as you see, the Go button is overflowing to the next column header and only partially visible. How to fix this?
image.png

You’ll need to share code so we can see what might be happening.

sure. here is the code ```Components.vl()
.add(label)
.add(Components.hl()
// .fullWidth()
.widthUndefined()
.withoutSpacing()
.withoutPadding()
.alignItems(FlexComponent.Alignment.BASELINE)
.addAndExpand(textField.getComponent(), 1)
.add(Components.button()
.text(“Go”)
.description(“Search”)
.withThemeVariants(ButtonVariant.LUMO_PRIMARY, ButtonVariant.LUMO_SMALL)
.onClick(buttonClickEvent → {
if (textField.isValid()) {
filterChangeConsumer.accept(textField.getValue());
}
})
.build())
.build())

            .withoutSpacing()
            .withoutPadding()
            .build();```

This is creating a VL and inside that there two componenets 1. Label 2. HL

HL contains a text field and a button.

The HL itself is overflowing
image.png

Any help on how to fix this ?

my understanding is, the HL should not go beyond its parent VL but it is not the case here

In mobile view, the button is not showing
image.png

so something to do with the layout, I could try with Div and see if it makes any difference