Fix that longest link text breaks on hover

Problem/Motivation

After you do a search, and hover over the links, in some themes the longest link breaks into two lines. It seems to not happen in Claro, but in Olivero and Bootstrap5.

It probably happens because the ui-state-active class is added in the div element, to show the dark blue background. This also happens to add a border, which makes the element too wide, making it break over two lines:

.ui-state-active, .ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active, a.ui-button:active,
.ui-button:active, .ui-button.ui-state-active:hover {
  border: 1px solid #003eff;
[...]

Steps to reproduce

1. Use Admin Toolbar Search to do a search under another theme than Claro
   For example from the front page, which uses the default theme (other than Claro) or by enabling Olivero or Bootstrap5 as admin theme (probably others as well)
2. Do a search and hover over the links
3. See that the longest link text breaks in two lines

The added class ui-state-active

Longest link text breaks

Add border, longest link doesn't break

Proposed resolution

Add a transparent border to the element, so that the calculated width stays the same, when a background with a 1 pixel border is added on hover.

Remaining tasks

User interface changes

API changes

Data model changes