[web] Save space when rendering a selector

[dgdavid]

Problem

Back in May, we introduced a preliminary version of a device selector (see #578). Although we like its look and feel, after extending its usage to localization page (#881) and space policy selector (#883), we've realized that there is too much wasted space between selector options. Even after reducing it accidentally as part of #883 (00c36b9, 15aab26)

Solution

Drop the space between options to make the selector looks like what it is: a single widget.

Testing

• Tested manually

Notes

With that change, it's true that a selector supporting multiple selection could look a bit weird at first sight when there are two or more options selected in a row. That's why I've kept the box-shadow for the selected options, which creates the impression that there is a slight separation between them.

Click to show/hide screenshots

---

Before	After

In any case, I'd like to go ahead without adding an exception for the only multiple selection we have at this time. The reason is that we're going to rework these selectors ASAP due to a few known issues. Most probably, the new version will include an extra widget per option: radio for single selection, checkbox for multiple selection. I'm confident on the fact that these widgets will throw away the potential issue we might introduce by removing the wasted space between options.

So, let's save time now 🙏

Screenshots

Before	After

Click to show/hide more screenshots

---

Before	After

[coveralls]

coverage: 75.341%. remained the same
when pulling 8dab1ac on change-selectors-look-and-feel
into bb1c038 on master.

[dgdavid]

Thanks for the approval and mege, @imobachgs