Avatar covers Run tests when the editor toolbar wraps to two rows

[EnjouWang]

Problem

On the interview page, Jim's avatar (#jim-stage) can sit on top of the Run tests button. The CSS comment above .jim-stage in web/styles.css says the stage is placed "clear of the toolbar, so it never covers Run tests", but that only holds while .editor-toolbar is a single row.

Steps to reproduce

1. Open an interview in a window about 1210–1240px wide (the avatar is hidden at 1200px and below). The exact range shifts with the installed fonts, since it depends on where the toolbar wraps.
2. Look at the right side of the editor toolbar.

Actual: the toolbar wraps to two rows, Run tests moves onto the second row at the right edge, and the avatar covers almost all of it.
Expected: the avatar stays below the toolbar at every width it is shown.

Cause

.jim-stage uses a fixed top: 4.25rem, which only clears a single-row toolbar. Because .jim-stage has pointer-events: none, a click on the covered area still reaches the button, so this is a visibility problem: the button is there but the candidate cannot see it.

Proposed fix

Derive the stage's top from the toolbar's actual bottom instead of a constant:

.jim-stage { top: var(--jim-stage-top, 4.25rem); }

const toolbar = document.querySelector(".editor-toolbar");
const placeJimStage = () => {
  const bottom = toolbar.getBoundingClientRect().bottom;
  document.documentElement.style.setProperty("--jim-stage-top", `${Math.ceil(bottom) + 6}px`);
};
new ResizeObserver(placeJimStage).observe(toolbar);
window.addEventListener("resize", placeJimStage);
placeJimStage();

In Chrome's responsive mode, this removed the overlap at every width I tried.

Follow-up proposal: let the candidate move the avatar

In a real video interview the candidate can usually move the interviewer's video tile. A movable avatar would also cover layouts nobody has measured yet, e.g. once #125 lets the editor get narrower.

The avatar contract says the stage takes no pointer events so it can never swallow a click meant for the editor. To keep that property:

• Only a small drag handle gets pointer-events: auto; the rest of the stage stays click-through.
• Snap to the four corners of the editor area rather than free placement, clamped so the stage never overlaps the toolbar or the test drawer.
• Re-clamp on resize; save the chosen corner with readStored / writeStored from web/audio-output.js, as Resizable sidebar on the interview page #125 proposes for the sidebar width.
• The handle is keyboard operable with an accessible name.
• Update the "Placement and pose" section of docs/avatar-contract.md.

This part is a separate design question and could be its own issue if the maintainers prefer to land the fix first.

Related

• Resizable sidebar on the interview page #125 (resizable sidebar) notes that the avatar may cover more of the editor at narrower widths; the fix above keeps the stage clear of the toolbar whatever width that divider leaves.
• Resizable Test Results Panel #94 (resizable test results panel) matters for the corner-snapping bounds.

[jserv]

@EnjouWang Confirmed on main: .jim-stage still sits at a fixed top: 4.25rem (web/styles.css:481). PR #144 only mentioned this issue. Please send the fix in the first half as a pull request on its own: place the stage from the toolbar's measured bottom, and update the "Placement and pose" section of docs/avatar-contract.md so its comment about clearing Run tests says how. The movable avatar is a separate design question; if you want it, open a new issue for it once this one is fixed.

[ArthurArthurArthur0817]

Hi @jserv,if no one is currently working on this, I would love to pick this up and submit the PR for the first half (including the markdown doc update) as discussed. Could I take it?

[EnjouWang]

Hi @jserv @ArthurArthurArthur0817, sorry for the overlap. I had been working
on the fix since @jserv's earlier comment asked me to send it, and only saw
the assignment after opening #244. It covers the first half as requested: the
stage is placed from the toolbar's measured bottom, and "Placement and pose"
in docs/avatar-contract.md now says how it clears Run tests.

I'm happy to go with whatever works best for the project. If #244 is useful,
a review from @ArthurArthurArthur0817 would be very welcome. If you have
already started your own version, please let me know and we can sort out
which one to keep.

[ArthurArthurArthur0817]

Hi @EnjouWang and @jserv, thanks so much for the open and collaborative response!
I explored a pure CSS approach in draft PR #245 (anchoring <aside id="jim-stage"> inside .editor-stack with relative/absolute positioning), demonstrating a zero-JS solution that cleanly relies on native browser flow when the toolbar wraps. On the other hand, #244 provides a dynamic measurement mechanism that flexibly covers cross-mode scenarios like whiteboard mode.
Both approaches offer clear architectural trade-offs between runtime simplicity and dynamic adaptability. I'm completely happy to defer to the maintainers on which design better aligns with the project's long-term vision—whether we incorporate the pure CSS idea into #244, or move forward with either PR!