Issue with Page Content Margins

[Elouaaaan]

Description: I'm experiencing inconsistent margin issues with the content on my pages. The problem varies under different circumstances:

1. New Tabs: Sometimes, the margin issue appears when I open a new tab (see Image 2). Other times, it does not occur (see Image 1).
2. Pages with Content: The margin issue consistently appears on pages with content.
3. With Toolbar Activated: The problem is exacerbated when the toolbar is activated (see Image 3).

Screenshots:

• Image 1: No margin issue on new tab
• Image 2: Margin issue on new tab, same behavior on tab with content without the toolbar activated
• Image 3: Margin issue on tab when the issue occurs with the toolbar activated

Additional Context:

• Browser version: Firefox Developer Edition 129.0b6
• Operating system: macOS Sonoma 14.5

[Naezr]

Option One: It's a Firefox 129 bug and I'll be able to fix it when my browser updates.

Option two: This is a Firefox bug on macOS and I won't be able to fix it. I don't have any Apple devices.

Try hovering over this spot with the Browser Toolbox inspector

P.S. I recommend either enabling the bookmark bar or moving the Sidebery elements to leave room for the window control buttons. You can drag and drop spaces, the search button, and the rest of the Sidebery panel

[Elouaaaan]

Thanks for the tip about the browser toolbox. I fixed the issue by adding this CSS to the end of the userChrome.css file:

browser {
    margin: 0 !important;
}

For some reason, there was a margin on these HTML tags. This fix made everything work as it should and got rid of the animation bug when showing or hiding side elements, making it smoother (it wasn't with the margin wasn't 0).

Also, thanks for the bookmark bar suggestion. It's not perfect when both the sidebar and navbar are hidden, but it's definitely better.

[Naezr]

browser {
    margin: 0 !important;
}

This code at first glance doesn't break anything for me. However, could you remove it for a while, reproduce the error again and take a similar screenshot? The yellow shows margin and the purple shows padding. I'd like to know the class or id of the element that this margin is acting on for some reason. There are many elements with the tag browser, I would like to narrow down the selector, so as not to break anything.

Also, thanks for the bookmark bar suggestion. It's not perfect when both the sidebar and navbar are hidden, but it's definitely better.

Right now, the styling of the window control buttons for macOS is minimal. Now that you've figured out the Browser Toolbox, you can experiment with them and share the result. I'd appreciate it

[Elouaaaan]

I checked the Browser Toolbox, and it turns out there's actually a margin on the browser tag. It's weird because the CSS is hardcoded directly with the style attribute.

Here's a more specific CSS code that could be better.

#tabbrowser-tabpanels {
    & browser[type="content"] {
        margin: 0 !important;
    }
}

[Naezr]

I've encountered something like this before when playing with native tabs. Some unthinkable margins of several thousand px were added to pinned tabs. It seems that the browser logic is slowly going crazy with such incredible tweaks