fix: use scoped ref instead of global .glass-card querySelector for wizard scroll

[omoh5]

Summary

Replaces a fragile global DOM query (document.querySelector('.glass-card')) with a scoped ref (dialogRef.current) for the wizard's scroll-to-top behavior, eliminating the risk of accidentally scrolling the wrong element.

Problem

StreamCreationWizard.tsx:325-327 — handleNext uses document.querySelector('.glass-card') to scroll the modal into view when advancing to the next step:

const modal = document.querySelector('.glass-card');
if (modal && typeof modal.scrollTo === 'function') {
  modal.scrollTo({ top: 0, behavior: 'smooth' });
}

.glass-card is a shared CSS class used across many unrelated components (stream detail cards, stat cards, event history panels, etc.). If any other .glass-card element renders earlier in the DOM while the wizard is open, the wrong element scrolls — a latent, hard-to-debug UI regression.

Solution

Replaced the global querySelector with dialogRef.current — the ref already attached to the wizard's own scrollable container via useModalDialog. This is a one-line fix:

// Before (fragile — matches any .glass-card in the DOM)
const modal = document.querySelector('.glass-card');

// After (scoped — always targets the wizard's own container)
if (dialogRef.current && typeof dialogRef.current.scrollTo === 'function') {
  dialogRef.current.scrollTo({ top: 0, behavior: 'smooth' });
}

dialogRef is returned by useModalDialog and attached to the wizard's inner <div className="glass-card ... max-h-[90vh] overflow-y-auto">, so it always points to the correct scroll container.

Files Changed

File	Change
frontend/src/components/stream-creation/StreamCreationWizard.tsx	Replace document.querySelector('.glass-card') with dialogRef.current
frontend/src/__tests__/stream-creation-wizard-scroll.test.tsx	New test file with 2 tests

Tests

Created stream-creation-wizard-scroll.test.tsx with two tests:

1. "scrolls the wizard's own container, not a different .glass-card element" — Renders the wizard alongside a sibling .glass-card element, spies on scrollTo of both, clicks "Next", and verifies only the wizard's container was scrolled.

2. "does not query the global DOM for .glass-card when scrolling" — Monkey-patches document.querySelector to throw if .glass-card is queried, then clicks "Next" and verifies no such call was made.

Both tests pass alongside all existing tests (31 total in the related test files).

Closes #1227

🤖 Generated with Codebuff
Co-Authored-By: Codebuff noreply@codebuff.com