If you enable editing in a course so the add-block block will be shown and then reduce the size of your screen you will see that the select element will overlap the borders of the block.

This is not a big deal when using a standard theme, as this only happens on screen sizes a few pixel wider than the threshold for the switch from the three- to the one-column layout. But it becomes a problem, when you either use custom css or a custom theme to modify the width of the block-columns.

The problem seems to be that the max-width property applied to the select element will use the width of the longest option element enclosed in the select. The max-width property will only work correctly (i.e. use only 92% of the space available in the block, as defined by bootsprapbase) if you set a width of 100% to the select element itself.

I fixed this in my custom theme by applying the following styles:

/* set width on select, remove max-width */

.block .singleselect select.singleselect {

    width: 100%;

    max-width: none;

}

(The specific selector is required to override the one defining the max-width.)