Search field alignment issue on screen < 1220px

[ghost]

Description:

For screen sizes < 1220px the alignment of content inner and search is not working. The end of the content should align with the end of the search widget, like it does in >= 1220px. This is caused by erroneous margins of the source widget. I have a fix at https://github.com/matjaeck/mkdocs-material/commit/ce37adbde6b273f98a287b841adcc70a3a3cabe6 that is working for me, can PR if you want.

[squidfunk]

Could you please provide a screenshot which shows what you mean exactly? Furthermore, the changes on your branch look a little hacky to me. Happy to find the root cause and fix it, but first we need a thorough description of the issue including some visual clues.

[ghost]

See missing screenshots below:

>= 1220px

< 1220px (Alignment issue of search field and content container)

This is how I calculated the .md-header-nav__source margins:

• tablet +: 230px width + 8px margin-right (.md-header-nav__source) + 4px margin-right (.md-header-nav) gives us the sidebar width, add 16px additional margin-left to account for md-content-inner's margin-right of 16px.

• screen +: like above but add 24px margin-left to account for md-content-inner's margin-right of 24px.

Removed the padding-right from md-source since it appeared not needed to me, but maybe I'm missing something here.

The margin-right: px2rem(-4px) that I added in my branch to md-search is indeed a hacky workaround for an issue that I caused when allowing disabling the primary sidebar, so not relevant for upstream.

Example of above (including other) changes is available at my WIP docs at https://matjaeck.github.io/OpenRADocs/traits/development/#

[squidfunk]

Thanks for the detailed explanation! Will look into it when I find the time.

[ghost]

FYI, I think the margin-right: px2rem(-4px) thing is actually fixing alignment issues resulting from different padding of md-header-nav__button and md-search, that only appear on tablet landscape + (when the search field is visible).

[squidfunk]

Fixed in 50ea834. Moved spacing from .md-nav-header__source to .md-search__inner and added another breakpoint

[squidfunk]

Released as part of 4.2.0.