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

NEW
Unassigned

Status

()

Firefox
Theme
6 years ago
3 years ago

People

(Reporter: Unfocused, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

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.

Updated

6 years ago
Component: Tabbed Browser → Theme
QA Contact: tabbed.browser → theme

Comment 1

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

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

Comment 2

3 years ago
(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;
  }
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;
  }
}
You need to log in before you can comment on or make changes to this bug.