Text on context menus not properly aligned

[infiniwave]

What happened?

See images provided

Reproducible?

• I have checked that this issue cannot be reproduced on Mozilla Firefox.

Version

1.0.0-a.13

Severity impact

Low

What platform are you seeing the problem on?

Windows

Relevant log output

No response

[mauro-balades]

This doesnt appear for me, do you have any userChrome.css?

[infiniwave]

No, I don't

[infiniwave]

Still occurs on 1.0.0-a.22

2024-08-17.18-26-33.mp4

[KarimElsayad247]

Happens to me on 1.0.1-a.5 (Linux)

[Bellisario]

Hello, any update?
"Pin to toolbar" menu item seems still not aligned on v1.0.1-a.18.

[gnc-07]

@infiniwave Is this still an issue on the latest version (1.0.2-b.0)?

[infiniwave]

@gnc-07 Indeed it is:

[salamijason]

Was unable to recreate on a fresh profile in b.2. For everyone who is still facing the issue, could you try on a new profile? This will help you move ur data to a new profile if you need.

[Bellisario]

Was still able to reproduce my issue #177 (comment) of "Pin to Toolbar" misalignment on the latest Zen Browser version (1.0.2-b.2).

To reproduce the issue:

• create a new browser profile
• follow the initial configuration (I chose "Multiple toolbars")
• install an extension (ex. uBlock Origin)
• install another extension (to enable "Extensions" button) (ex. Dark Reader)
• click on the "Extensions" button
• click on the three dots of any extension in here
• see that "Pin to Toolbar" text is misaligned and goes on the pin icon

[salamijason]

was able to reproduce on macOS b.2, thank you for all the input!

[KarimElsayad247]

It's there on a build based on a9fb598 on main branch. I could only see the problem on linux, on windows the context menus look fine.

The problem can't be reproduced on Firefox 133 since it doesn't have context menu icons.

[KarimElsayad247]

Some specifics:

• Only extension icons are non-aligned
• Correctly positioned items have a padding-left of 38px, while the mis-positined ublock item has a padding left of just 5px, but that obviously isn't just a 30px difference. Here's what it looks like if I give it the same 38px padding
  

So there is definitely something funky going on with the way menu items are layed here.

[KarimElsayad247]

ahhhhh, the other icons are positioned absolutely, that's why they behave differently

[KarimElsayad247]

So this 38px padding is the padding for the text, not icon

[KarimElsayad247]

It now looks good once I give the icon absolute positioning in line with the other icons, and remove the left padding on text

[KarimElsayad247]

HOWEVER, this still leaves checkbox menu items broken. Still need investigation

[KarimElsayad247]

Though I guess the fix would be similar, just remove the checkbox from normal flow and absolutely position it.

[KarimElsayad247]

Though I do have to ask.... @mr-cheff Why are the icons absolutely positioned instead of simply being positioned normally?

[mauro-balades]

Is it fixed now?

[mauro-balades]

Though I do have to ask.... @mr-cheff Why are the icons absolutely positioned instead of simply being positioned normally?

One of those things we inherit from firefox

[Bellisario]

Is it fixed now?

Same "Pin to Toolbar" issue on 1.0.2-b.5 for me.

[KarimElsayad247]

Nope, same on b.5

[salamijason]

just to clarify, the text is now properly aligned and the only issue left is the icons? cheff mentioned above that the weird icon alignment is inherited from ff. please let me know if i missed something. will be closing issue now.

[Bellisario]

@salamijason seems my issue is still present on the latest beta:

Hello, any update? "Pin to toolbar" menu item seems still not aligned on v1.0.1-a.18.

[salamijason]

@Bellisario strange, I can't reproduce that. Could you try a new profile?

[Bellisario]

@salamijason yes, I just tried on a new profile and it seems the issue is still present.

These are the steps I took (don't know if it's relevant but I'm using a Mac):

• create a new profile from about:profiles and open it
• setup Zen to use multiple toolbars (leaving everything else as default)
• after setup complete, open "Add-ons manager" by clicking on the "extensions" button
• install two extensions (I chose uBlock Origin and Dark Reader)
• make sure only one of the two is pinned (it won't show the bug if there are no "unpinned" extensions) (in my case Dark Reader wasn't pinned by default)
• click on the "extensions" button, then on the three dots of an extension there (Dark Reader for me)
• see that the "Pin to toolbar" button is over the pin icon