I think there are a couple of small polish items we can make in the panel that would help a lot:

• update the placeholder text color to be the softer comment color var(--theme-comment-alt); I think
• center the guillemet >> in the gutter
• left align the placeholder text with the gutter so it is slightly to the right of the gutter

Feel free to take any of these and make individual PRs. As a reference, the panel is here and we toggle the panel here

Here's some basic CSS for updating the prompt:

.conditional-breakpoint-panel .prompt {
    font-size: 1.8em;
    color: var(--theme-comment-alt);
    padding-left: 3px;
    width: 30px;
    text-align: right;
    padding-right: 3px;
}

After the fix, the UI looks like.

The one gotcha will supporting dynamic gutter widths which are set in this function
resizeBreakpointGutter.