fix(ui): stabilize assessment scrolling and sticky work tabs

Merged
BI
1mo ago
+344-32

User description

Summary

Repair scrolling on /teaching/assessments and its shared work tabs. Header visibility, resize and scroll events now share an animation-frame update; unchanged geometry is not republished, and animation completion replaces repeated layout polling while stationary. Apply bottom-action focus clearance to both document scrolling and the installed layout's main scroll surface.

Add assessment regression coverage for direction reversals, tab and role changes, sheets, bottom reachability, keyboard focus, rotation, six viewport widths, enlarged text, reduced motion and forced colours. Register the new spec with the phone-chrome selector and document the shared behavior.

Areas touched: App experience, Engineering platform.

Verification

Earlier local evidence was obtained in the original development checkout at adcc101ab2d469fa350be15c274b44461e253915 with the repair applied. This PR isolates the six-file repair on current main; those results are not fresh verification of this PR commit.

  • Assessment production Chromium: 7 tests passed, including compiled installed-layout emulation.
  • Focused DOM and selector tests: 24 passed; phone-chrome contracts: 137 passed.
  • Final typecheck, scoped lint, formatting and diff checks passed in the development checkout.
  • Warmed production Chromium trace: 1,810 recorded tasks, none of 50 ms or longer; eight layout events, maximum 0.458 ms. Whole-page desktop measurements, not physical iPhone evidence or a frame-rate guarantee.
  • verify:phone-chrome exited 1 because a document-viewer actions-dialog setup timed out. That exact case passed on a focused rerun without edits; five other ownership cases passed initially.
  • verify:ui failed on the Smart-search accessibility test's 60-second total timeout (tests/ui-clinical-ask.spec.ts:210) and was interrupted after test 99. Remaining broad coverage is unrun; the timeout is not proven pre-existing.
  • Physical iPhone Safari and installed-app acceptance are unavailable. Matching WebKit runtime is absent; compiled-layout emulation does not establish device acceptance.

Verification not run: format, lint, typecheck, unit tests, builds, browser tests, provider-backed checks and hosted CI observation were not rerun for this bare publication request. No checks were rerun solely to publish the prepared change.

UI verification not run: this publication request does not rerun the wider UI gate. Earlier incomplete and failed UI evidence is described above.

Risk and rollout

  • Risk: shared sticky-tab behavior affects other work pages; broader UI and physical-device acceptance remain incomplete. Publish as draft for review, with no auto-merge.
  • Rollback: revert the repair commit.
  • Provider or production effects: publishing the feature branch and draft PR only. No database, authentication, clinical-content or retrieval changes. No merge or deployment performed.

Notes

The original development checkout and its unrelated audit work are preserved. This PR contains only the scrolling repair's six files.

Summary by cubic

Stabilizes scrolling on /teaching/assessments so sticky work tabs no longer flicker, stick incorrectly, or fight the bottom action dock, including on installed-layout phones.

Behavior changes

  • Scroll, resize, and bar-visibility updates now batch into one animation frame; unchanged geometry is not republished, and layout polling stops while the reader is stationary.
  • Sticky position rechecks on animation completion, focus changes, and reduced-motion transitions.
  • Header visibility is tracked through its own collapse/stack DOM owners, so unrelated mutations no longer trigger rechecks.
  • Bottom-action focus clearance now also applies to #main-content, giving installed phones the same clearance as browser tabs.

Coverage

  • Adds regression tests for direction reversals, tab and role changes, sheets, bottom reachability, keyboard focus, rotation, six viewport widths, enlarged text, reduced motion, and forced colours.
  • Registers the new spec with the phone-chrome selector and the PR/release shard manifests; ui-roster-team.spec.ts moves to shard 3 to keep duration balance, and estimated timings are added to the release manifest.

CodeAnt-AI Description

Keep assessment tabs aligned as the header moves and focused controls clear of the action dock

What Changed

  • Work-area tabs now follow the universal header as it hides or reappears, including after focus and animation changes.
  • Focused controls in installed phone layouts now scroll clear of the bottom action dock.
  • Added regression coverage for assessment scrolling, keyboard focus, viewport sizes, and installed phone layouts.

Impact

✅ Fewer assessment scroll jumps
✅ Tabs stay aligned as the header moves
✅ Focused controls stay above the installed-phone action dock

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.