Contrib.social

Mobile friendly breadcrumb (Lighthouse)

Open on Drupal.org →
Created on 11 July 2021, about 3 years ago
Updated 18 January 2024, 8 months ago

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

After patch apply

🐛 Bug report
Status

Needs work

Version

9.5

Component
Claro  →

Last updated 1 day ago

Created by

🇨🇿Czech Republic hop

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Needs manual testing

    The change/bugfix cannot be fully demonstrated by automated testing, and thus requires manual testing in a variety of environments.

  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment over 1 year ago →
    🇺🇸United States smustgrave

    Was previously tagged for steps to reproduce, screenshots, and IS update

  • Status changed to Needs review over 1 year ago
  • Comment over 1 year ago →
    🇮🇳India Nikhil_110

    Address #13
    I have tried the steps to reproduce, screenshot and IS updated.

  • Status changed to Needs work over 1 year ago
  • Comment over 1 year ago →
    🇺🇸United States smustgrave

    This issue talks about how this is a lighthouse failure.

    We probably will need a test case to show this was fixed.

  • Comment 8 months ago →
    🇺🇸United States shoshan
  • Comment 8 months ago →
    shweta__sharma

    I tried to replicate the issue but I am unable to replicate it. I followed the steps mentioned in the STR

    Followed below mentioned steps -

    1. Set Claro theme as a default theme.
    2. Created node with a long title.
    3. Then go to the incognito tab with the created node view page.

    How i can see the below breadcrumbs links mentioned in before screenshots?

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024