Change Details

cc @Jdrewniak @alexhollender While working on moving the search into the header (in T249363) @alexhollender flagged in T249363#6406543 that "once the user links drop beneath the search bar, the search bar should shift over to the right edge of the container " {F32237004} From my investigations so far, this has a few complications * The search has a max-width - when this is altered to be width: 100% the input is larger than the max-width but we get the desired effect * It would mean managing a larger gap between search and logo at low resolutions - is it worth it while the personal tools implementation is prone to change in future? * It is not helped by the move away from absolutely positioned layout.

=== Description There are currently three refinements needing to be made to the search box in the site header: ====== 1. Reduce max-width Currently the max-width seems to be set at `36.25em` (`580px`) . We should reduce it to `28.25em` (around `450px`). | | current | updated | -- | -- | -- | wide screen | {F32243571} | {F32243573} | narrow screen | {F32243576} | {F32243578} ====== 2. Adjust margin-left Currently margin-left on `#searchform` is set to `auto` which pulls the search box into the center of the screen. Instead it should be anchored to the right of the logo. So we need to 1) remove `margin: auto` from `#searchform`, and 2) increase margin-left on `#p-search` from `2.5em` to `3.5em`. | current | updated | -- | -- | {F32243608} | {F32243606} ====== 3. Shift search box to be aligned-right once user tools drop below At a screen width of 1014px the user tools drop below the search bar. At this point it should shift to the right edge of the container. | current | updated | -- | -- | {F32237004} | {F32243616} (it appears a patch for this has already been pushed up) **Developer notes:** From my investigations so far, this has a few complications * The search has a max-width - when this is altered to be width: 100% the input is larger than the max-width but we get the desired effect * It would mean managing a larger gap between search and logo at low resolutions - is it worth it while the personal tools implementation is prone to change in future? * It is not helped by the move away from absolutely positioned layout.

cc @Jdrewniak @alexhollender=== Description There are currently three refinements needing to be made to the search box in the site header: ====== 1. Reduce max-width Currently the max-width seems to be set at `36.25em` (`580px`) . We should reduce it to `28.25em` (around `450px`). | | current | updated | -- | -- | -- | wide screen | {F32243571} | {F32243573} | narrow screen | {F32243576} | {F32243578} While working on moving the search into the header (in T249363) @alexhollender flagged in T249363#6406543 that "once the user links drop beneath the search bar====== 2. Adjust margin-left Currently margin-left on `#searchform` is set to `auto` which pulls the search box into the center of the screen. Instead it should be anchored to the right of the logo. So we need to 1) remove `margin: auto` from `#searchform`, the search bar should shiand 2) increase margin-left over to the right edge of the container "n `#p-search` from `2.5em` to `3.5em`. | current | updated | -- | -- | {F32237004}43608} | {F32243606} ====== 3. Shift search box to be aligned-right once user tools drop below At a screen width of 1014px the user tools drop below the search bar. At this point it should shift to the right edge of the container. | current | updated | -- | -- | {F32237004} | {F32243616} (it appears a patch for this has already been pushed up) **Developer notes:** From my investigations so far, this has a few complications * The search has a max-width - when this is altered to be width: 100% the input is larger than the max-width but we get the desired effect * It would mean managing a larger gap between search and logo at low resolutions - is it worth it while the personal tools implementation is prone to change in future? * It is not helped by the move away from absolutely positioned layout.