Contrib.social

Fix that longest link text breaks on hover

Open on Drupal.org →
Created on 24 May 2023, about 2 years ago

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

🐛 Bug report
Status

Fixed

Version

3.0

Component

User interface

Created by

🇩🇰Denmark ressa Copenhagen

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024