fix(web-client): keep chat transcript from covering the dashboard

[john-the-dev]

Problem

The web UI chat transcript + input live in #bottom-panel, which is position: fixed; bottom: 0. The dashboard (#dynamic-region — Tasks / Notes / Questions) is in normal document flow above it. The body only reserved a static padding-bottom: 60px for the input bar — not for the transcript, which grows up to 50vh. So as chat history piled up, the fixed panel expanded upward and covered the dashboard's Questions panel; scrolling to the bottom couldn't bring it into the clear because there was no clearance below it.

Fix

A ResizeObserver (syncBottomPad) keeps body padding-bottom synced to the panel's real height, so the dashboard's bottom content always has clearance above the fixed panel.

function syncBottomPad() {
  const bp = $('bottom-panel');
  if (bp) document.body.style.paddingBottom = (bp.offsetHeight + 12) + 'px';
}
// in DOMContentLoaded:
const bp = $('bottom-panel');
if (bp && window.ResizeObserver) { new ResizeObserver(syncBottomPad).observe(bp); }
syncBottomPad();
window.addEventListener('resize', syncBottomPad);

Before / After

Before — real capture of the bug: the chat transcript overlaps the Questions panel (the Q + Yes/No are partially covered).

After — with the fix, the Questions panel (Yes / No) sits fully clear above the chat panel.

Test

• tsc --noEmit clean (no web-client errors)
• Headless probe (Questions panel + tall transcript, scrolled to page bottom): question box covered: true before the fix, covered: false after.

🤖 Generated with Claude Code

[bassilkhilo-ag2]

✅ Minimal and correct. ResizeObserver keeps body padding-bottom in sync with the fixed panel's real height; window.resize fallback handles browsers without ResizeObserver. Single-function change, no side effects. Approve.

[bassilkhilo-ag2]

Using ResizeObserver to sync body padding-bottom with the fixed panel height is the correct approach — a static padding value cannot track a dynamically-growing chat transcript. The try/catch wrapper is necessary since ResizeObserver is not available on all browsers. resize event listener handles window resize as belt-and-suspenders. Clean fix.

[bassilkhilo-ag2]

Simple and correct fix. ResizeObserver tracks #bottom-panel height dynamically; window resize as fallback; +12px aesthetic gap. This prevents the chat history from covering the Questions panel when the transcript is long. LGTM.