Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Touchable area for dropdown indicator is really tiny #451

Open
SleeplessByte opened this issue Oct 28, 2024 · 2 comments
Open

Touchable area for dropdown indicator is really tiny #451

SleeplessByte opened this issue Oct 28, 2024 · 2 comments

Comments

@SleeplessByte
Copy link
Member

Describe the bug

I often misclick when using a pointer device.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://fronteers.nl
  2. Using a pointer device, click slightly below the dropdown button
  3. Nothing happens

Expected behavior
The touch target is at least 44x44 (thick thumbs anyone?)

Screenshots
touch target of 15x24 instead of 44x44

The menu items are already > 44px in height :)

@banaan666
Copy link
Collaborator

The following could fix this, it removes the right padding of the main menu item, which then is added to the arrow button. So spacing is more or less the same as before. It also adds some spacing on the right of the arrow.

.page-navigation a {
  padding-right: 0; /* add this */
}

@media (min-width: 60.125em) {
  .navigation-submenu-toggle {
    /*padding: 0;*/ /* remove this */
  }
}

@banaan666
Copy link
Collaborator

That was a pain to find in all those CSS files, but I found both... PR incoming.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants