Quantcast
Channel: Issues for Drupal core
Viewing all articles
Browse latest Browse all 295160

Mobile friendly breadcrumb (Lighthouse)

$
0
0

Problem

If the long breadcrumb is on multiple lines, it does not meet the minimum link distance.

Tap targets are not sized appropriately 90% appropriately sized tap targets

Interactive elements like buttons and links should be large enough (48x48px), and have enough space around them, to be easy enough to tap without overlapping onto other elements.

Proposed resolution

.content-header {
  padding-top: .7rem;
  padding-bottom: 2.25rem;
}
.breadcrumb__item,
.breadcrumb__link {
  line-height: 48px;
}

Steps to reproduce

  • Setup Drupal 9.5.x-dev.
  • Activate Claro theme and set default theme
  • Create node with long title
  • Go to incognito tab with created node view page
  • There line-height between breadcrumbs and title is not properly showing And Node title and header padding not properly showing.

User interface changes

Before patch apply
link-text-screenshot
link-text-screenshot

After patch apply
link-text-screenshot
link-text-screenshot


Viewing all articles
Browse latest Browse all 295160

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>