style: align headers icons

[ofirc77]

Hi, this fix is for the following bug -
#974

It seems that in the header.css file the '.main-header' template with the field "justify-content" modified the behavior of the headers icons not to be aligned as expected. I change it to "flex-end" that verify that in each language we are using the headers icons bar will be at the end of line which means the other side as expected. Below there is an example of before and after the change.

Before change:

After change:

[github-actions]

Preview: https://s3.amazonaws.com/noam-gaash.co.il/12417313327/open-bus/227/index.html
Preview Storybook: https://s3.amazonaws.com/noam-gaash.co.il/12417313327/open-bus/227/storybook/index.html
Test Report (if available): 'https://s3.amazonaws.com/noam-gaash.co.il/12417313327/open-bus/ff727b93d563b15b7f0a9c422a401f6be28fdde9/test-results/index.html'

[NoamGaash]

Thanks!
Have you verified that it looks right on mobile devices?
(visual tests are not executed in the CI pipeline from forked repositories)

[ofirc77]

Yes. Checked it on mobile as well.
Hebrew view:

English view:

[NoamGaash]

In your PR preview, it seems different -

[ofirc77]

Hi, updated the MR. Added specific tags for the mobile view. When I checked it as the screenshot you shared I saw the issue.
So I defined the CSS to order them differently when they are in mobile (also applied for dark mode )

[NoamGaash]

Thanks @ofirc77 !

1. could you please verify that you have pushed your code, and that it's passing the linter (npm run lint)?
2. did you try to play with the horizontal size of the browser and see that it looks fine on every screen size?

[ofirc77]

Yes. It passed the lint check and I increased the max-width to 750 to make sure also in horizontal it will look good as well. I played with it a little bit it seems that in some cases it will not function as expected.

[NoamGaash]

@ofirc77 could you please make sure you have pushed your recent changes?
In the code, it seems like there's a missing ending curly brace (})

[NoamGaash]

you can see it by visiting the commit statuses section of this pull request:

[ofirc77]

@NoamGaash updated the PR according to the project linter. It seems all tests are passing now

[NoamGaash]

great, thanks. let's just be consistent with the mobile width

open-bus-map-search/src/layout/sidebar/sidebar.scss

Line 17 in f924722

@media only screen and (width >= 768px) {

[ofirc77]

Done

[NoamGaash]

Thank you very much! 🚌 💯 🥇