New Tab button appears unusually large

[Sollace]

Describe the bug

See attachment.

This is something that I have experienced with Floorp which incorporates Lepton, however I believe the issue may be originating from here as I see Lepton doing something to the styling of the new tab button. (specifically it overrides the border radius and padding):

(leptonChrome.css)

  /* '+'Icon */
  #tabs-newtab-button .toolbarbutton-icon {
    border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */
    padding: calc(var(--toolbarbutton-inner-padding) - var(--tab-block-margin) / 4) var(--toolbarbutton-inner-padding)
      calc(var(--toolbarbutton-inner-padding) + var(--tab-block-margin) / 4 + var(--uc-tabs-navbar-shadow-size)) !important;
    -moz-context-properties: fill, fill-opacity;
    fill: var(--toolbarbutton-icon-fill);
    fill-opacity: var(--toolbarbutton-icon-fill-opacity);
  }

The temporary "fix" I worked out for my userChrome.css is as follows:

    #tabs-newtab-button image {
        /* Fix new tab button appearing unusually large */
        padding: 5px !important; /*make icon smaller*/
        margin: 3px; /*add spacing around the outside of the icon*/
        margin-top: 5px; /*moved down to vertically center the button*/
        border-radius: 4px !important; /*add border radius to be consistent with other UI elements*/
        width: calc(2 * var(--toolbarbutton-inner-padding) + 10px) !important; /*10 changed from 16*/
        height: calc(2 * var(--toolbarbutton-inner-padding) + 10px) !important; /*10 changed from 16*/
    }

Expected behavior

No response

Screenshots

What it looks like without the "fix":

What it looks like with the "fix":

OS

Linux, Windows 10

OS - Others

No response

Firefox Version

11.3.3

Distribution

• [ ] Original Lepton
• [X] Lepton's photon style
• [ ] Lepton's proton style

Theme

• [ ] Light
• [X] Dark
• [ ] Alpenglow (System: Light)
• [ ] Alpenglow (System: Dark)
• [ ] System Default
• [ ] Others: (e.g. Photon Colors, Google Chrome Dark, Fairytale Of Nature)

Theme - More Info

No response

user.js setup

user.js setup

```javascript // Your settings ```

Additional context

No response

[black7375]

Hello, what's your version of floorp? In my floorp(11.3.3, 20230914032237) doesn't have that problem.

[Sollace]

Hello, what's your version of floorp? In my floorp(11.3.3, 20230914032237) doesn't have that problem.

11.3.3 installed via flatpak. I noticed it start after it updated a few days ago, but I was behind on updates for a while. On windows I've had it a fair while longer since that one was installed after the linux one.

[Sollace]

My lepton settings for comparison.

[Sollace]

I will note that I'm using Manjaro/KDE. Despite that, the flatpak version is still using the Gnome window decorations, which may play a part in it.

[surapunoyousei]

Sorry for the delay in finding this issue.

I was aware of this issue and was investigating whether we could resolve it. This seems to occur in Windows as well, and is more likely to be found when multirow-tab is enabled.

Also, it does not occur with Proton Fix. Only Lepton and Photon are affected

[surapunoyousei]

Maybe relate issue.

https://github.com/Floorp-Projects/Floorp/issues/493

[surapunoyousei]

  @supports not -moz-bool-pref("userChrome.tab.photon_like_padding") {
    @supports -moz-bool-pref("userChrome.tab.lepton_like_padding") {
      .tabbrowser-tab[pinned] {
        padding-inline: 1px !important;
      }
      .tabbrowser-tab:not([pinned]) {
        margin-inline: -1px !important;
      }
    }
    @supports not -moz-bool-pref("userChrome.tabbar.multi_row") {
      #TabsToolbar:not([multibar]) .tabbrowser-tab:not(:last-of-type) {
        margin-inline-end: -2px !important;
      }
    }
  }

I found the cause. This CSS have the problem. Open PR

[black7375]

I'll closing it because we think it's already been resolved.