1955584 - UI bug: Vertical tabs 'X' close button is too close to the right edge of the tab

Status: RESOLVED FIXED

(Firefox :: Sidebar, enhancement, P5)

Description

[Paul (FxUX)]

Attachment: Live and desired position for the X icon.

This is just a UI fit-and-finish bug.

The X button to close a vertical tab (when the sidebar is expanded) is too close to the right edge.

The right padding should match the top/bottom padding, as shown in the bottom image of the attached screenshot.

Thanks!

Comment 1

[Gautam Panakkal]

Hello Nikki, new-ish contributor here. I'd like to be assigned to this bug!

Comment 2

[Gautam Panakkal]

Attachment: Bug 1955584 - Set right margin equal to top/bottom margin on vertical tab close buttons r=nsharpley

Comment 3

[Gautam Panakkal]

With the change, the space to the right of the button is very nearly equal to the space above/below it, but not exactly equal. This may be more apparent on different setups. How should I go about testing for and handling this?

Comment 4

[Nikki Sharpley (:nikkis) (she/her)]

Hi gautampanakkal! Thanks for volunteering to work on this bug!

If you've never contributed before, I recommend stepping through this guide to get set up with a local build of Firefox: https://firefox-source-docs.mozilla.org/contributing/contribution_quickref.html#

Once you're set up and have a local build, you should be able to reproduce this bug with the following steps:

1. Navigate to about:preferences and turn on vertical tabs.
2. Open a couple of tabs.
3. Hover over an inactive tab - you should see the close button on hover. You should be able to inspect the element using the "Browser Toolbox" (found in the hamburger menu for the browser under "More Tools").

Ideally we want the "margin-inline-end" value for that element to more closely match the the distance between the close button and top/bottom of the tab.

Let me know if you have any questions :)

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/db2eb1dd2a1a
Set right margin equal to top/bottom margin on vertical tab close buttons r=nsharpley,desktop-theme-reviewers,tabbrowser-reviewers,sfoster

Comment 6

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/db2eb1dd2a1a