735907 - Hit area for tab close button is too small when using touchscreen

Status: NEW

(Firefox :: Theme, defect)

Description

[Blair McBride [:Unfocused] (UNAVAILABLE)]

When using a touch screen, the hit area of the tab close buttons is quite small, and can be difficult to hit. The height of tabs expand when using a touch screen, but it seems the hit area of the close buttons does not. They would also benefit from greater width.

Comment 1

[Fusion Future]

I think it has become better now, but still small.
Easy fix

.tabbrowser-tab>.toolbarbutton-icon
{
padding:10px !important;
}

Comment 2

[Fusion Future]

(In reply to Fushan Wen from comment #1)
> I think it has become better now, but still small.
> Easy fix
> 
> .tabbrowser-tab>.toolbarbutton-icon
> {
> padding:10px !important;
> }

Add this


  .close-icon > .button-icon,
  .close-icon > .button-box > .button-icon,
  .close-icon > .toolbarbutton-icon {
    width: 36px;
  }

Comment 3

[Jared Wein [:jaws] (please needinfo? me)]

You should surround those rules with a media query that is only enabled for touch displays:

@media (-moz-touch-enabled) {
  .tabbrowser-tab>.toolbarbutton-icon {
    padding: 10px !important;
  }

  .close-icon > .button-icon,
  .close-icon > .button-box > .button-icon,
  .close-icon > .toolbarbutton-icon {
    width: 36px;
  }
}

Comment 4

[MarjaE]

As of Firefox 99, when using Duet Display, it's almost impossible even with a stylus. At best, if I'm lucky, I get a contextual menu with "close tab" in a list of several options, I select "close tab," and if I'm lucky, after several tries it might work.