I like that the dropdown spans the whole width of the area it is referring to, and thus serves as a header with a dropdown function. It emphasizes that the selection in the dropdown applies to the whole area.
I see why some users may have a hard time recognizing the dropdown as such if they do not notice the arrow on the far right. I see three direct solutions to this:
- The arrow emulates the look of an ordinary dropdown, however, such dropdowns are usually aligned left or right - with text on one side, and an arrow on the other side. As you are using a centered layout anyway, there should be either one arrow right below the text (might look weird), or two arrows, one on each side. This would maintain the symmetrical appearance of the whole dropdown and make seeing the arrow more likely.
- Do not align the arrow at the side of the element, but place it right next to the text. Like this, the whole bar becomes a clickable header with a dropdown menu.
- Rather than a "combobox", use a header and a (separate) dropdown button. If the button is a separate element with visible borders, even when it is in the same place as the arrow is now, it might be easier to catch the users' attention.
Related to the last item, maybe that points to another issue: The arrow, as it is, is quite small and indeed somewhat unnoticeable, compared to the entire size of the header bar and the text. At the size the image is scaled down to in your question for me (i.e. not at full size), I can hardly recognize that it is an arrow at all, it could just as well be a little circular dot. Hence, making the arrow larger (just try and give it about the same height as the text) and slightly increasing the spacing between arrow and border of the control might be a good start.