Cannot use search at 800 pixels width

[joswhite]

As I decrease the width of the page, when I get to 800 pixels the search bar hides, but the search icon is not visible until I get below 800 pixels. Hence, it looks like this. This occurs at 800 pixels wide, both in Firefox and Chrome:

Environment:

• Firefox 148.0.2 (latest), running on Windows 11
• Chrome 146.0.7680.80 (latest), running on Windows 11

To reproduce this issue, I navigated to https://piccolo-theme.readthedocs.io/en/latest/, opened DevTools (F12), clicked on the top right "Responsive Design Mode" icon (Firefox) or top left "Toggle device toolbar" icon (Chrome). Then I entered "800" in the input box for the width.

The reason this occurs is because of this CSS, which is generated from basic_mod.scss:

@media (max-width: 50rem) { /* hides the search bar at <=50rem */
  div#top_nav nav div.searchbox_wrapper {
    display: none;
  }
}
@media (min-width: 50rem) {  /* hides the search icon at >=50rem */
  div#top_nav nav p.mobile_search_link {
    display: none;
  }
}

Combining "max-width" and "min-width" is usually a bad idea, because no matter what number you choose, there will always be an overlap where either both or none of the intended actions occur.

[joswhite]

Here's a suggested fix. For simplicity, I'm showing the CSS rather than the SCSS. Replace the CSS above with the following:

@media (max-width: 50rem) { /* hides the search bar at <=50rem */
  div#top_nav nav div.searchbox_wrapper {
    display: none;
  }
}
div#top_nav nav p.mobile_search_link { /* by default, hides the search icon */
  display: none;
}
@media (max-width: 50rem) {
  div#top_nav nav p.mobile_search_link { /* shows the search icon at <=50rem */
    display: block;
  }
}