fix(#595): Fixed navbar content overflow for small devices #598
Conversation
| height: 100%; | ||
| display: flex; | ||
| align-items: center; |
There was a problem hiding this comment.
This property makes the background look like this when Map is clicked:
| @@ -67,6 +68,10 @@ const StyledHeader = styled.header` | |||
| font-weight: bold; | |||
| font-size: 1rem; | |||
|
|
|||
| @media (min-width: 767px) and (max-width: 820px) { | |||
There was a problem hiding this comment.
I think you've correctly identified the reason for the layout to go funky, it's that min-width:110px that you're unsetting! I'm not sure if the solution is the best we can do, it happens to work in French, but at the cost of making the click area for the Map link quite small - see here with added background colors:
Is there a way to do a flexible layout for these links?
Also, there'll be a third link there - the Activity tab - see #537 . If you're working on it, you could add the third link, let it link to /changes which will not render anything until we finish that feature, and then we'll have a good layout even with three links.
|
Closing in favour of #661. Thanks @ahmedhalac for figuring out what caused the overflow, it was helpful for solving the issue! |
Fixed overflow for devices in width from 770px to 820px
Also fixed alignment for "Map" and "About" since they weren't aligned properly. There was minor difference.
TESTING RESULTS:
Closes #595