search

empiricaly / meteor-empirica-core

Core Meteor package for the experiment Empirica platform. This is where you should submit issues.
MIT License
27 stars 13 forks source link

Header creates white empty space on small screens #252

Closed Karakaii closed 2 years ago

Karakaii commented 3 years ago

On small screen sizes the header (with the New Player, `About, and other buttons) does something weird and creates a big blank on the screen. I tried this both with Chrome and Firefox. empirica:core 1.16.0. image

I believe the problem comes from the following styling that is set to this part of the header

.bp3-navbar-group .bp3-align-right {
  float: right;
}

Taking this part out fixes the problem. image (1)

Maybe replacing it with this sort of styling is best?

.bp3-navbar-group .bp3-align-right {
  float: none;
  display: flex;
  justify-content: right;
}
npaton commented 3 years ago

I don't know how much we want to override blueprint, but I guess if we namespace the change into our header, that would be ok. I would accept a PR for this. :)

Karakaii commented 3 years ago

If you point me to the places where the header is created in the Empirica core I could give it a try.

npaton commented 3 years ago

I believe it's in here on the NavBar component. You have a .header class that might be helpful to isolate the change.

ui/components/Public.jsx