Hamburger button positioning breaks with non-default Windows scaling

[Firnschnee]

Description

The hamburger menu button is positioned via position: fixed with right: var(--uc-window-buttons-width) (line ~693). This works with default Windows title bar buttons, but breaks when:

• Windows display scaling is non-standard (125%, 150%, etc.)
• Custom title bar button themes/sizes are used
• Different OS configurations change the window control width

Possible solution (not yet 100% working)

/* Windows control button width — used for Hamburger positioning
   100% scaling: 138px (default)
   125% scaling: 138px (Windows scales internally)  
   150% scaling: 138px
   Custom titlebar: measure with Browser Toolbox */
--uc-window-buttons-width: 138px;

Current state

Users can manually adjust --uc-window-buttons-width in the config section, but this is a per-setup value that can't be auto-detected in pure CSS.

Open question

The obvious fix would be JavaScript (measuring actual window button width at runtime), but that means an autoconfig.js or user.js dependency - which contradicts FoxOne's CSS-only approach.

Is there a pure CSS solution? Possible avenues worth investigating:

• CSS env() for titlebar geometry (proposed but not yet in Firefox)
• calc() with viewport units that account for scaling
• Flexbox/grid positioning that avoids position: fixed entirely
• anchor-positioning (CSS Anchor Positioning spec - not yet in Firefox)

Possible fix with fx-autoconfig

(() => {
  const sync = () => {
    const box = document.querySelector('.titlebar-buttonbox-container');
    if (box) {
      document.documentElement.style.setProperty(
        '--uc-window-buttons-width',
        box.getBoundingClientRect().width + 'px'
      );
    }
  };
  sync();
  window.addEventListener('resize', sync);
  new ResizeObserver(sync).observe(
    document.querySelector('.titlebar-buttonbox-container')
  );
})();

If anyone knows of a CSS-only approach that reliably handles this, input is welcome.