Firefox Extension Injects Excess Horizontal Padding on Collapsed Followed-Channel Sidebar

Summary

When the safebadge Firefox extension is active, the followed-channel sidebar displays excessive left and right padding in its collapsed state. The expanded state is unaffected. The most likely cause is that the extension's injected CSS targets a sidebar container element without scoping the rule to the expanded state, causing padding to be applied unconditionally and visually widening the collapsed sidebar beyond its intended dimensions.

Root-Cause Analysis

Confirmed evidence:

• The visual discrepancy exists only in the collapsed sidebar state.
• The expanded sidebar renders correctly, meaning the base page styles are intact.
• The issue is introduced specifically by the extension being enabled; disabling it restores correct appearance.

Reasonable inference:

• The extension injects a stylesheet or applies inline styles to an element that is shared between the collapsed and expanded sidebar states.
• The injected padding rule lacks a state-aware selector (e.g., a class or attribute that distinguishes collapsed vs. expanded) and therefore applies to both states, but only becomes visually apparent when collapsed because the expanded layout has sufficient content width to absorb or override the extra space.
• The collapsed sidebar's layout is constrained (icon-only, narrow width), so any additional horizontal padding directly increases the rendered width and shifts or clips content noticeably.

Alternative causes:

• The extension may be adding wrapper elements or badge containers with default browser margins/padding that accumulate inside the narrow collapsed sidebar.
• A padding shorthand may be overriding a padding-left/padding-right: 0 rule that the host page only applies in the collapsed state via a scoped selector.

What additional evidence would confirm the diagnosis:

• Inspecting the computed styles on the sidebar container in Firefox DevTools with the extension enabled, specifically comparing padding-left and padding-right values in both states.
• Identifying which stylesheet origin (extension content script vs. injected <style> tag) introduces the differing padding value.

Resolution Steps

1. Open Firefox DevTools (F12) and navigate to the page with the collapsed sidebar visible.
2. Inspect the sidebar container element — select the outermost element of the collapsed sidebar and examine the Computed tab, filtering for padding.
3. Identify the rule origin — in the Rules tab, locate the padding, padding-left, or padding-right declarations that differ from the expected values. The file name or <style> tag shown in the rule source will indicate whether the extension is responsible.
4. Locate the extension's injected stylesheet or content script — in the extension's source, find the CSS rule targeting the sidebar container.
5. Scope the padding rule to the expanded state only by adding a parent selector or attribute condition that matches the expanded sidebar. For example, if the host page uses a class such as .side-nav--expanded or a data-collapsed attribute:

/* Before — applies unconditionally */
.side-nav-card {
  padding: 0 8px;
}

/* After — scoped to expanded state only */
.side-nav--expanded .side-nav-card {
  padding: 0 8px;
}

1. Alternatively, explicitly zero out horizontal padding in the collapsed state if the extension must target the shared element:

.side-nav--collapsed .side-nav-card {
  padding-left: 0;
  padding-right: 0;
}

1. If the extension injects wrapper elements (e.g., badge <span> or <div> containers), ensure those elements are styled with display: contents, margin: 0, and padding: 0 to avoid contributing to layout width.
2. Reload the extension and the page to confirm the fix.

CLI Commands

If the extension is being developed locally, rebuild and reload after the CSS change:

# If using web-ext for development
web-ext run --firefox <PATH_TO_FIREFOX_BINARY> --source-dir ./src

# Lint the extension before packaging
web-ext lint --source-dir ./src

Configuration Snippets

If the extension uses a manifest-declared content stylesheet, verify the css entry is not injecting styles too broadly:

{
  "content_scripts": [
    {
      "matches": ["*://*.example.com/*"],
      "css": ["content.css"],
      "run_at": "document_end"
    }
  ]
}

Ensure content.css rules are scoped as narrowly as possible to avoid unintended cascade side effects on host-page layout elements.

Verification

1. Enable the extension and navigate to the page.
2. Collapse the sidebar and confirm the width matches the expected narrow icon-only layout (reference the "how it should look" baseline dimensions).
3. Open DevTools → Inspector and confirm no extension-originated padding-left or padding-right values appear on the sidebar container in the collapsed state.
4. Expand the sidebar and verify padding still renders correctly (extension functionality preserved).
5. Toggle the extension on/off (about:addons) and compare sidebar widths — they should be visually identical after the fix.

Rollback indicator: If the sidebar becomes too narrow or badge elements lose spacing after the patch, the scoping selector is too aggressive and needs to be relaxed.

Prevention

• Prefer additive, scoped CSS rules — always qualify extension-injected styles with the narrowest selector that matches only the intended target state. Avoid bare class or element selectors on host-page layout containers.
• Test both collapsed and expanded sidebar states as part of any UI regression check before releasing an extension update.
• Use !important sparingly — if host-page styles need to be overridden, do so only on specific properties and states to avoid unexpected cascade collisions.
• Set up a visual regression test using a tool such as Percy or BackstopJS against the extension's test fixtures, capturing both sidebar states.
• Monitor host-page DOM and class changes — streaming platforms frequently update their front-end. Subscribe to changelog announcements or watch for DOM structure changes in CI to catch selector drift early.
• Isolate extension DOM additions — any injected wrapper elements should use display: contents or explicit width: 0; padding: 0; margin: 0 resets to be layout-neutral by default.