fix all overlays

tests/browser_overlays.js

@@ -0,0 +1,65 @@
+import assert from "node:assert/strict";
+
+export async function runOverlaySmoke({ evaluate }) {
+  const results = await evaluate(`(async () => {
+    const { renderOverlayLeaderboard, renderTeamOverlay, renderObsOverlay } = await import('/src/overlays.js');
+    const { escapeHtml } = await import('/src/html_escape.js');
+    const { installListSorting } = await import('/src/list_sorting.js');
+    const frame = document.createElement('iframe');
+    frame.style.cssText = 'position:fixed;left:0;top:0;height:900px;border:0;z-index:99999';
+    document.body.append(frame);
+    const doc = frame.contentDocument;
+    const style = doc.createElement('link'); style.rel='stylesheet'; style.href='/src/styles.css';
+    const loaded = new Promise((resolve,reject) => {style.onload=resolve;style.onerror=reject;});
+    doc.head.append(style); await loaded;
+    const labels = {'table.pos':'Pos','table.driver':'Förare','table.laps':'Varv','table.result':'Resultat','table.gap':'Gap','table.ahead_gap':'Gap fram','table.own_delta':'Eget delta','table.best_lap':'Bästa varv'};
+    let layout='leaderboard';
+    const deps={t:key=>labels[key]||key, escapeHtml, formatLap:()=> '0:36.619', formatTeamActiveMemberLabel:()=> 'Test Driver', formatPredictedLapDelta:()=> '-', getVisiblePassings:()=>[], getEventName:()=> 'Club Practice', getSessionTypeLabel:()=> 'Practice', getStartModeLabel:()=> 'Mass start', getStatusLabel:()=> 'Running', getObsOverlayConfig:()=>({layout,rows:10,showClock:true,showLaps:true,showResult:true,showBest:true,showGap:true}), normalizeStartMode:v=>v, renderPositionGrid:()=>'', getSessionGridEntries:()=>[]};
+    const rows=[{key:'a',displayName:'Karl Bodell',laps:27,resultDisplay:'0:36.619',bestLapMs:36619},{key:'b',displayName:'Anders',laps:19,resultDisplay:'0:37.854',bestLapMs:37854}];
+    const results=[];
+    const tick=()=>new Promise(resolve=>setTimeout(resolve,0));
+    try {
+      for (const mode of ['leaderboard','tv','team']) {
+        for (const width of [390,900,1600]) {
+          frame.style.width=width+'px';
+          doc.body.innerHTML='<section class="overlay-shell"><div class="overlay-board"></div></section>';
+          const root=doc.querySelector('.overlay-board');
+          root.innerHTML=mode==='team' ? renderTeamOverlay(rows,{}, {},deps) : renderOverlayLeaderboard(rows,deps);
+          const stop=installListSorting(root); await tick();
+          const list=root.querySelector('.overlay-race-list');
+          const header=list.querySelector('.list-sort-toolbar');
+          const row=list.querySelector('.overlay-race-row');
+          const deltas=[...header.children].map((button,index)=>Math.abs(button.getBoundingClientRect().left-row.children[index].getBoundingClientRect().left));
+          for(let attempt=0;attempt<3 && !header.children[1].textContent.includes("▲");attempt++) header.children[1].click();
+          await tick();
+          const firstName=list.querySelector('.overlay-race-driver strong').textContent;
+          const firstPosition=list.querySelector('.pos-pill').textContent;
+          results.push({mode,width,aligned:deltas.every(delta=>delta<1),firstName,firstPosition,columns:header.children.length,tableScroll:list.scrollWidth>list.clientWidth});
+          stop();
+        }
+      }
+      for (layout of ['leaderboard','grid']) {
+        for (const width of [390,1600]) {
+          frame.style.width=width+'px';
+          doc.body.innerHTML='<section class="overlay-shell-obs"></section>';
+          const root=doc.body.firstElementChild;
+          root.innerHTML=renderObsOverlay({name:'Practice',eventId:'e',status:'running'},rows,{}, {remainingMs:300000},{},deps);
+          const stop=installListSorting(root);await tick();
+          results.push({mode:'obs-'+layout,width,controls:root.querySelectorAll('.list-sort-toolbar').length});
+          stop();
+        }
+      }
+    } finally {frame.remove();}
+    return results;
+  })()`);
+  for (const result of results) {
+    if (result.mode.startsWith("obs")) assert.equal(result.controls, 0, JSON.stringify(result));
+    else {
+      assert.equal(result.aligned, true, JSON.stringify(result));
+      assert.equal(result.columns, 8, JSON.stringify(result));
+      assert.equal(result.firstName, "Anders", JSON.stringify(result));
+      assert.equal(result.firstPosition, "2", JSON.stringify(result));
+    }
+  }
+  console.log("PASS overlay heading alignment at 390/900/1600px, sorting preserves race position, OBS has no sort controls");
+}