Refinement

[michael-o]

@kwin Here is another try. This fits now into the sidebar, but will also narrow it for the topbar. I think those 7 percert are acceptable for the topbar.

[kwin]

I don't think you get centered alignment with just width in percentage. This is due to the fact that the margins of the sidebar are fix, while the column overall is responsive, i.e. for very wide browser windows even with this PR the search input is misaligned and the left margin is much wider than the fix right one.

[michael-o]

I don't think you get centered alignment with just width in percentage. This is due to the fact that the margins of the sidebar are fix, while the column overall is responsive, i.e. for very wide browser windows even with this PR the search input is misaligned and the left margin is much wider than the fix right one.

I agree. Therefore, I likely need to revert my previous commit and leave the ticket open. My CSS knowledge is to weak in this regard.

[kwin]

I just tried width: calc(100% - 28px); and this worked fine. Look also at https://stackoverflow.com/questions/17631611/100-width-minus-margin-and-padding and https://caniuse.com/calc.

[michael-o]

I just tried width: calc(100% - 28px); and this worked fine. Look also at https://stackoverflow.com/questions/17631611/100-width-minus-margin-and-padding and https://caniuse.com/calc.

Where do those 28px come from?

[kwin]

Where do those 28px come from?

Right and left margin of 14px in the sidebar. One could even restrict that width to only inside the sidebar.

[michael-o]

Where do those 28px come from?

Right and left margin of 14px in the sidebar. One could even restrict that width to only inside the sidebar.

Double check when this search bar is in the top bar. Physics change there.

[kwin]

You can easily restrict width: calc(100% - 28px); to only sidebar with a selector like .sidebar-nav input.search-query.

[michael-o]

Yes, this is what I thought too.

[kwin]

Maybe 28px is not correct.
The important metrics are:

margin-right and left: 9px and border-radius: 15px

[kwin]

Looks like 30px = 2 x border-radius is the correct value to subtract here.

[kwin]

LGTM now. Thanks.