Unnecessary outer paddings

[gedinakova]

Description

On behalf of Pablo & George

• igniteui-angular version: 19.1
• browser:

The QB has some default outer paddings. What's more, the padding is split between the igx-query-builder-header and the igx-query-builder-tree (internal), which makes it hard to override.

Expected result

Either:
a. it should have no outer padding, it's very easy to add it if needed.
b. if it comes with default padding, it should be at the top-level, to make it simple to override, instead of being scattered in different sub-elements.

[desig9stein]

@gedinakova is there a way for me to see that sample from the screenshots?

[desig9stein]

Regarding the questions for the paddings.

They have to stay as they are now, the QB has theme properties exposed to the end user, like header and content background. If it does not have padding, adding a background to the header for example will make the QB look broken.

Comparison with and without padding:

@andiesm813 @ig-georgeA I created a custom theme for the QB to show the problem if QB has no padding and I noticed another problem even when there is padding :) As you can see from the screenshot the spacing between the header and the content looks odd, this is material but it looks the same for indigo. Since the gap between the header text and the content is not equal to the padding on top and there is no padding on top of the "From/To" labels. Can we do something about this?

We also have a problem If the user only changes the content background.
I can fix this by ensuring that if the user doesn't provide a header background but provides a content background, the header will default to the same background as the content.