macOS: Pet overlay action buttons overlap with native material rendering but lay out correctly in CSS mode

What version of the Codex App are you using (From “About Codex” dialog)?

ChatGPT/Codex desktop 26.727.40816 (build 6067)

What subscription do you have?

ChatGPT account (subscription tier does not appear relevant)

What platform is your computer?

macOS 27.0 beta (26A5388g), Apple Silicon (arm64)

What issue are you seeing?

When the floating Pet/avatar overlay shows two controls below the mascot—for example the realtime Voice button plus the task status/count/expand control—the controls are laid out differently depending on the overlay rendering path:

• CSS/non-native rendering: the two circular controls are separate, placed side by side, and the pair is centered below the mascot.
• Native material rendering: the Voice button remains near the single-button center position while the second control is added on the right. Their circular material backgrounds overlap, and the pair is not re-centered as a group.

The mascot asset itself renders correctly. The problem is limited to the control layout/material surfaces below the mascot.

Comparison screenshots were captured for this report:

1. CSS/non-native path — correct spacing and centering.
2. Native material path — overlapping controls.

What steps can reproduce the bug?

1. Wake/show a Pet in the Codex desktop overlay on macOS.
2. Use the default native material rendering path.
3. Start a task so that a task status/count/expand control appears below the Pet alongside the realtime Voice control.
4. Observe that the two circular controls overlap and are not centered as one group.
5. As a diagnostic comparison, fully quit Codex, enable the internal persisted flag avatar-overlay-force-non-native-rendering: true, restart Codex, and reproduce the same two-control state.
6. Observe that the CSS/non-native path places the controls side by side and centers the pair correctly.

The internal flag is mentioned only as an A/B diagnostic; it is not being treated as a supported user-facing workaround.

What is the expected behavior?

Whenever two controls are visible below the Pet, both rendering paths should:

• keep the circular controls visually separate;
• center the full two-control group below the mascot; and
• move the Voice control slightly left from its single-control position to account for the second control.

Actual behavior

The CSS/non-native path behaves as expected. With native material rendering, the Voice control appears to retain its single-control anchor and the second native material surface overlaps it on the right.

Additional information

This appears to be a native-overlay layout/composition issue rather than a Pet spritesheet issue. A likely area to inspect is whether the native material surfaces are positioned from individual control anchors before the multi-control container has recomputed its width/centering.

I searched the existing open issues for Pet/avatar overlay button overlap and native-vs-CSS layout differences and did not find an exact duplicate.