Skip to content

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

Merged
BigSimmo merged 3 commits into
mainfrom
fix/assessment-scroll-smooth
Oct 11, 2026
Merged

BigSimmo merged 3 commits into
mainfrom
fix/assessment-scroll-smooth

Conversation

@BigSimmo

@BigSimmo BigSimmo commented Oct 11, 2026 •

Copy link
Copy Markdown
Owner

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.

Written for commit 34866cf. Summary will update on new commits.

View guided diff Turn on auto-fix


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.

@supabase

supabase Bot commented Oct 11, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@coderabbitai

coderabbitai Bot commented Oct 11, 2026 •

Copy link
Copy Markdown
Contributor

Important

  • 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: ASSERTIVE
  • Plan: Advanced
  • Run ID: 92728585-ad2e-40e4-99ba-e75007cdaeab

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@codeant-ai

codeant-ai Bot commented Oct 11, 2026 •

Copy link
Copy Markdown

🏁 CodeAnt Quality Gate Results

Commit: 34866cf1
Scan Time: 2026-10-11 09:44:20 UTC

✅ Overall Status: PASSED

Quality Gate Details

Quality Gate Status Details
Secrets ✅ PASSED 0 secrets found
Duplicate Code ✅ PASSED 0.0% duplicated
SAST ✅ PASSED No security issues
Bugs ✅ PASSED Rating S: No bugs
IAC ✅ PASSED No IAC issues

View Full Results

@codspeed

codspeed Bot commented Oct 11, 2026 •

Copy link
Copy Markdown

Merging this PR will not alter performance

⚠️ 3 benchmarks spent significant time in system calls

System calls cannot be consistently instrumented, so they are not included in the measure, which understates the real cost. Please switch to the Walltime instrument to accurately measure system calls.

Measurement and system calls

✅ 8 untouched benchmarks


Comparing fix/assessment-scroll-smooth (34866cf) with main (c5cec98)

Open in CodSpeed

gitar-bot[bot]
gitar-bot Bot previously approved these changes Oct 11, 2026

@gitar-bot gitar-bot Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gitar has auto-approved this PR (configure)

@BigSimmo
BigSimmo marked this pull request as ready for review October 11, 2026 08:52
@codeant-ai

codeant-ai Bot commented Oct 11, 2026 •

Copy link
Copy Markdown

🤖 CodeAnt AI — Review Status

Status Commit Started (UTC) Finished (UTC)
✅ Reviewed your PR 17582a9 Oct 11, 2026 · 08:52 08:58

@codeant-ai

codeant-ai Bot commented Oct 11, 2026

Copy link
Copy Markdown

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

@BigSimmo
BigSimmo enabled auto-merge October 11, 2026 08:52

@greptile-apps greptile-apps Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BigSimmo has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.

@claude

claude Bot commented Oct 11, 2026 •

Copy link
Copy Markdown
Contributor

Claude encountered an error after 2s —— View job


I'll analyze this and get back to you.

@codeant-ai codeant-ai Bot added the size:L This PR changes 100-499 lines, ignoring generated files label Oct 11, 2026
@qodo-code-review

Copy link
Copy Markdown
Contributor

PR Summary by Qodo

Stabilize assessment scrolling and shared sticky work tabs

🐞 Bug fix 🧪 Tests 📝 Documentation 🕐 40+ Minutes

Grey Divider

AI Description

• Stabilizes shared work tabs during header changes without repeated layout polling while scrolling
 is idle.
• Keeps focused controls clear of the action dock in browser and installed layouts.
• Adds assessment regressions, phone-chrome test selection, and documentation for both scroll
 surfaces.
Diagram

graph TD
  H["Header owner"] --> Q["Frame queue"] --> M["Geometry sync"] --> V["CSS offsets"] --> T["Sticky tabs"]
  S["Scroll surface"] --> Q
  F["Focus and resize"] --> Q
  M --> T
  D["Dock clearance"] --> S
Loading
High-Level Assessment

Keep the event-driven, frame-batched hook and CSS-owned sticky placement. Continuous animation-frame polling would retain idle layout work; an IntersectionObserver previously missed the installed layout's inner scroller. Review should concentrate on shared work pages and both scroll owners, since broader UI and physical-device acceptance remain incomplete.

Files changed (6) +323 / -31

Bug fix (2) +71 / -28
work-mode.cssClear the action dock on the installed scroll surface +2/-1

Clear the action dock on the installed scroll surface

• Applies bottom scroll padding to #main-content as well as the document when a work dock is present, keeping focused controls above the dock in installed layouts.

src/app/work-mode.css

use-sticky-work-tabs.tsBatch sticky-tab updates and avoid idle layout polling +69/-27

Batch sticky-tab updates and avoid idle layout polling

• Coalesces scroll, resize, header, and focus notifications into animation-frame updates, and avoids republishing unchanged geometry. Limits header observation to its owners and rechecks position after animations complete rather than polling throughout them.

src/components/work-frame/use-sticky-work-tabs.ts

Tests (2) +246 / -0
ui-phone-scroll-assessments.spec.tsCover assessment scrolling across phone layouts and accessibility settings +172/-0

Cover assessment scrolling across phone layouts and accessibility settings

• Adds browser and compiled installed-layout journeys for direction changes, bottom reachability, navigation, dialogs, role changes, focus, and reduced motion. Checks responsive widths, enlarged text, forced colours, dock clearance, and an attached Chromium performance trace.

tests/ui-phone-scroll-assessments.spec.ts

use-sticky-work-tabs.dom.test.tsxGuard frame coalescing and header observation +74/-0

Guard frame coalescing and header observation

• Tests that scroll bursts schedule one position check without continuing to poll during animation, and that unrelated visibility mutations do not update the work band.

tests/use-sticky-work-tabs.dom.test.tsx

Documentation (1) +2 / -0
search-chrome-behaviour.mdDocument shared sticky-tab and dock behavior +2/-0

Document shared sticky-tab and dock behavior

• Explains how work tabs follow the universal header, when their position is rechecked, and how dock focus clearance applies to both scroll surfaces. Distinguishes installed-layout emulation from physical iPhone acceptance.

docs/search-chrome-behaviour.md

Other (1) +4 / -3
phone-chrome-plan.mjsInclude assessment regressions in phone-chrome selection +4/-3

Include assessment regressions in phone-chrome selection

• Registers the new assessment spec as a consumer of the shared phone-scroll helper, so helper changes select its full browser coverage.

scripts/phone-chrome-plan.mjs

@qodo-code-review

qodo-code-review Bot commented Oct 11, 2026 •

Copy link
Copy Markdown
Contributor

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

Grey Divider


Action required

1. PR UI shard validation fails 🔴 High 🐞 Bug ☼ Reliability ⭐ New
Description
The PR profile moves the roster spec to shard 3 while adding the assessment scrolling spec to shard
1, producing estimated full-duration totals of about 416.6s, 448.2s and 454.7s. The resulting
38.1-second spread exceeds the 30-second limit enforced by the shard test, so PR shard validation
fails.
Code

scripts/playwright-pr-shards.mjs[289]

+    shard: 3,
Relevance

●●● Strong

Shard balancing fixes are explicitly intended and historically accepted when estimates violate
validation ceilings.

PR-#3451
PR-#3013
PR-#3444

ⓘ Recommendations generated based on similar findings in past PRs

Evidence
The changed profile assignments yield approximately 416.6s, 448.2s and 454.7s for shards 1–3, a
38.1s spread. The totals function sums each profile's fullSeconds, while the shard test requires the
full-duration spread to be at most 30 seconds.

scripts/playwright-pr-shards.mjs[286-297]
scripts/playwright-pr-shards.mjs[331-346]
tests/playwright-pr-shards.test.ts[129-132]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
The new assessment spec and roster reassignment leave the three PR UI shard estimates at approximately 416.6s, 448.2s and 454.7s, exceeding the enforced 30-second spread.

### Fix Focus Areas
- scripts/playwright-pr-shards.mjs[286-297]
- tests/playwright-pr-shards.test.ts[129-132]

### Recommended Fix
Rebalance the profile assignments so the full-duration and post-critical totals remain within their respective ceilings; restoring the roster spec to shard 1 while retaining the assessment spec on shard 1 brings the estimated full-duration spread below 30 seconds. Run the shard balance test and update the explanatory comments to match the final assignment.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Dismiss ↗ | View ↗



Remediation recommended

No findings for this group


Informational

No findings for this group

Grey Divider


Resolved findings

1. Browser test gates reject the new spec ✓ Resolved
Description
ui-phone-scroll-assessments.spec.ts matches the production test pattern but has no entry in either
the PR shard profiles or the release shard timing tables. The PR shard parity check reports it as
orphaned, and every sharded release project rejects it for lacking a timing entry before its tests
can run.
Code

tests/ui-phone-scroll-assessments.spec.ts[R1-2]

+import { writeFile } from "node:fs/promises";
+import { expect, test } from "playwright/test";
Relevance

●●● Strong

New production specs must be registered in every shard configuration to prevent deterministic PR and
release gate failures.

PR-#2843
PR-#2215

ⓘ Recommendations generated based on similar findings in past PRs

Evidence
The production matcher includes suffixed phone-scroll specs, but PR shard groups are built only from
explicit profiles. Their validator and test reject any on-disk production spec missing from those
groups. The release sharder independently requires a timing for every production spec in each
project table and throws when one is absent.

scripts/playwright-pr-shards.mjs[20-21]
scripts/playwright-pr-shards.mjs[326-333]
scripts/playwright-pr-shards.mjs[358-382]
tests/playwright-pr-shards.test.ts[36-40]
scripts/playwright-release-shards.mjs[327-341]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The new production assessment spec is absent from the explicit PR and release browser-test shard manifests, causing shard validation and sharded release runs to fail.

## Fix Focus Areas
- scripts/playwright-pr-shards.mjs[190-205]
- scripts/playwright-release-shards.mjs[40-75]
- tests/ui-phone-scroll-assessments.spec.ts[1-2]

## Recommended Fix
Add the assessment spec to one PR shard profile with an estimated duration, and add estimated timings to every project table in `releaseSpecSeconds`. Run the shard parity tests and release shard validation.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

Context sources
✅ Compliance rules (platform): 9 rules
✅ Cross-repo context — repo relationships
✅ REVIEW.md
Review mode: Auto: 🚀 Fast: Localized shard configuration updates with low, readily assessable behavioral risk.

Grey Divider

Tip of the day
💡 Did you know, you can tweak Display settings with a live preview to see your comment before it ships

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

Grey Divider

Previous reviews

Review updated until commit 34866cf

Results up to commit 17582a9 ⚖️ Balanced


🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX issues (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)


Action required

No findings for this group


Remediation recommended

No findings for this group


Informational

No findings for this group


Resolved findings

1. Browser test gates reject the new spec ✓ Resolved
Description
ui-phone-scroll-assessments.spec.ts matches the production test pattern but has no entry in either
the PR shard profiles or the release shard timing tables. The PR shard parity check reports it as
orphaned, and every sharded release project rejects it for lacking a timing entry before its tests
can run.
Code

tests/ui-phone-scroll-assessments.spec.ts[R1-2]

+import { writeFile } from "node:fs/promises";
+import { expect, test } from "playwright/test";
Relevance

●●● Strong

New production specs must be registered in every shard configuration to prevent deterministic PR and
release gate failures.

PR-#2843
PR-#2215

ⓘ Recommendations generated based on similar findings in past PRs

Evidence
The production matcher includes suffixed phone-scroll specs, but PR shard groups are built only from
explicit profiles. Their validator and test reject any on-disk production spec missing from those
groups. The release sharder independently requires a timing for every production spec in each
project table and throws when one is absent.

scripts/playwright-pr-shards.mjs[20-21]
scripts/playwright-pr-shards.mjs[326-333]
scripts/playwright-pr-shards.mjs[358-382]
tests/playwright-pr-shards.test.ts[36-40]
scripts/playwright-release-shards.mjs[327-341]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The new production assessment spec is absent from the explicit PR and release browser-test shard manifests, causing shard validation and sharded release runs to fail.

## Fix Focus Areas
- scripts/playwright-pr-shards.mjs[190-205]
- scripts/playwright-release-shards.mjs[40-75]
- tests/ui-phone-scroll-assessments.spec.ts[1-2]

## Recommended Fix
Add the assessment spec to one PR shard profile with an estimated duration, and add estimated timings to every project table in `releaseSpecSeconds`. Run the shard parity tests and release shard validation.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

Qodo Logo

@qodo-code-review

Copy link
Copy Markdown
Contributor

Qodo Fixer

✅ Committed (1) · ☑ Fixed (1)

Grey Divider

Commits pushed directly to this PR — no separate fix PR opened.

Process — 1 fixed
  • ☑ Fixed: Browser test gates reject the new spec

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-11T08:55:32.215810Z 17582a9 Draft marked ready
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

gitar-bot[bot]
gitar-bot Bot previously approved these changes Oct 11, 2026

@gitar-bot gitar-bot Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gitar has auto-approved this PR (configure)

Comment thread src/app/work-mode.css Resolved
@codeant-ai

codeant-ai Bot commented Oct 11, 2026 •

Copy link
Copy Markdown

CodeAnt PR Risk: Medium Risk

  • The PR needs attention before merging because installed-layout focus clearance may be too small when the action dock wraps at enlarged text sizes.
  • The installed dock test checks default-sized layout only; verify focused content stays visible when labels wrap in the installed scroll container.

Assessed commit: 34866cf1e95d

@gitar-bot gitar-bot Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gitar has auto-approved this PR (configure)

@gitar-bot

gitar-bot Bot commented Oct 11, 2026

Copy link
Copy Markdown
Contributor
Code Review ✅ Approved

🟡 Medium risk · The shared sticky-tab and installed-layout focus-clearance changes could misposition work tabs or leave focused controls obscured across work pages.

Stabilizes scrolling on /teaching/assessments by batching scroll, resize and header-visibility updates into one animation frame and adding bottom-action focus clearance to #main-content. No issues found.

Auto-approved: No blocking issues found.
Please see Auto-approve Docs for details on setting custom approval criteria.

Review coverage

🤖 Auto-approval Approved

📋 Rules No rules evaluated

🧪 Functional validation Not enabled · Set up

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Counting what did not apply, without listing it.

Comment with these commands to change the behavior for this request:

Auto-apply Compact
gitar auto-apply:on         
gitar display:verbose         

Was this helpful? React with 👍 / 👎 | Gitar

Comment thread scripts/playwright-pr-shards.mjs Resolved
@qodo-code-review

Copy link
Copy Markdown
Contributor

Code review by qodo was updated up to the latest commit 34866cf

@BigSimmo
BigSimmo merged commit 7af4ab7 into main Oct 11, 2026
47 checks passed
@BigSimmo
BigSimmo deleted the fix/assessment-scroll-smooth branch October 11, 2026 09:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🔴 Large blast radius size:L This PR changes 100-499 lines, ignoring generated files 🕐 40+ Minutes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant