The chat pane becomes an object

A refactor plan, written 2026-08-14 after six versions（v879–v884）were spent making the chat pane cover the right half — something any sub-page does with one class. Nothing here is urgent. The app behaves correctly today; this removes the reason it took six tries, and the standing tax on whoever next asks the chat to sit somewhere it has not sat before. Written for a fresh session: everything needed is on this page.

1 · What is actually wrong

Every sub-page in the app is a real object: fixed to the right half, with its own ground, its own place in the stack, its own slide. The chat pane is not one of them — it predates that vocabulary. It spans the whole window and holds itself off the list with padding. Measured, both in their resting state:

So “lay the chat over the right pane” was never one property. It was four missing ones, and each masked the next — which is exactly why it arrived one version at a time:

2 · The one fact that makes this safe

3 · Target state

On wide, .mainpane becomes what every sub-page already is:

@media(min-width:761px){
  .mainpane{ position:fixed; top:0; bottom:0; left:var(--sidebar-w); right:0;
             background:var(--bg); }        /* no padding-left, no background-clip */
}

…and the wildcard drawer's padding-right:var(--wild-w)（≥1080px）becomes right:var(--wild-w), which is the same idea said in the same grammar as everything else.

4 · What gets DELETED by it

These exist only to compensate for the fake pane. Each one going away is how you know the refactor worked — and each is a place a future change would otherwise have to remember:

5 · The steps

6 · The probe that should have been run first

Paste in the console. It asks what a finger actually lands on and what the boxes really are — not whether a rule was applied, which is the question that cost four versions.

const g=el=>getComputedStyle(el), R=el=>el.getBoundingClientRect();
const mp=document.getElementById('mainPane'), dr=document.getElementById('chatsDrawer');
const at=(x,y)=>{const h=document.elementFromPoint(x,y);
  return {inChat:!!h?.closest('#mainPane'), inLeft:!!h?.closest('#chatsDrawer')};};
console.log({
  pane:{pos:g(mp).position, left:g(mp).left, width:g(mp).width,
        padL:g(mp).paddingLeft, bg:g(mp).backgroundColor, z:g(mp).zIndex,
        vis:g(mp).visibility, box:R(mp)},
  leftPress: at(180, 400),               // must be the list
  rightPress: at(innerWidth-200, 400),   // must be the chat
});

Rules of thumb this refactor earned: a z-index cannot be seen through visibility:hidden · hit-testing goes to the topmost BOX, not the topmost pixel · a z-index fix has to be checked against the DOM it is stacking, not the panes it is named after（raising the left drawer also raises Vibes — the feed is its child）.

7 · What NOT to do

• Do not touch the narrow block. Not to tidy it, not to unify it with wide. The two are different shapes for good reasons and the keyboard depends on the narrow one.
• Do not convert .mainpane to a .drw. It is not a sub-page: it has no back-stack entry, no header of its own, and it is the app's default surface, not something opened over one.
• Do not do this in the same session as feature work. It is a no-behaviour-change refactor; anything that goes wrong should be attributable to it alone.
• Do not deploy it with a batch. Ship it by itself so a regression has one suspect.

8 · Status

Not started. Written 2026-08-14. Owner intends a dedicated session. When it lands, update this line and record the deleted rules in the Style Guide's version log.