Vaadin. Combo box responsive popup window - css

Question

I have several combo boxes all over the page. And there is one combo box that I want to be responsive.
Let's assume I have layout containing it, just like this:
public class MyLayout extends CssLayout ... {
...
void initLayout {
displayBoxFilter = new ComboBox();
displayBoxFilter.addStyleName("displayBoxFilter");
}
}
and I have CSS like this:
.MyUI {
...
.displayBoxFilter {
color: red;
}
}
.MyUI[width-range~="0-767px"] {
...
.displayBoxFilter {
color: blue;
}
}
But when I do this, only combo-box-caption colors get changed. But I also want to change the color of the popup window.
According to combo box CSS style rules (https://vaadin.com/docs/-/part/framework/components/components-combobox.html) i add v-filterselect-suggestpopup and nested styles outside MyUI style:
.v-filterselect-suggestpopup {
.gwt-MenuItem {
color: yellow;
}
}
.v-filterselect-suggestpopup[width-range~="0-767px"] {
.gwt-MenuItem {
color: green;
}
}
After that, i have a combo box with caption colors that responsively get changed. But popup window color remains same (always yellow).
I think it's because popup window is rendered outside my responsive UI. Responsive.makeResponsive(displayBoxFilter) didn't work. How do I make this window responsive?
Any suggestions would be helpful!
Thanks in advance
UPD based on Jouni's answer (worked for me):
I have added #media outside #mixin in mytheme.scss like this:
#mixin mytheme {
#include theme;
...
}
#media (max-width:767px) {
.mytheme {
.gwt-MenuItem {
color: green;
}
}
}

Answer 1

This is a limitation in the Responsive extension, that it doesn’t apply to any overlay elements (except the Window component).
You’re best workaround is to use regular CSS media queries.