[`tabs_to_bottom.userchrome.css`]: `megabar` overlays/hides `urlbar`

[madduck]

I am using

@import "./tabs_to_bottom.userchrome.css";

in my userChrome.css and it works. Except for when I click in the urlbar and the megabar opens. The latter unfortunately overlays the former:

One way to address this is to add

#urlbar[open]{
  bottom: 5rem !important;
  top: auto !important;
}

But this just reveals that the urlbar actually disappears when the megabar is shown:

Can this be fixed? I am also not keen on using 5rem in the above.