MobileNavigation.tsx
The corrected navigation component
All examples
Example workflow · Repository change
Find a mobile regression, change the code, and verify the fix
This example shows how an agent reads conventions in an existing React repository, reproduces a problem, makes a scoped edit, and runs tests and browser checks.
This engineering example uses a simulated repository and does not represent customer code.
MobileNavigation.tsx+12 −5
useEffect(() => {
+ const releaseScrollLock = () => {
+ document.body.style.overflow = ''
+ }
if (open) lockScroll()
- return unlockOnUnmount
+ return releaseScrollLock
}, [open])
Verification
18 tests passed
Build completed
Mobile checked
The request
“The page remains locked after the mobile menu closes. Fix the regression without changing the navigation component public API, add tests, and verify desktop behavior.”
Source material
frontend repository
A React and Vite project with component tests
reproduction.md
Steps, expected behavior, and browser environment
mobile-error.mp4
A short recording of the failure
What the agent did
- 1
Reproduce the issue
Start the project and confirm the scroll lock remains after close.
- 2
Locate the cause
Inspect effect cleanup and multiple close paths to find the missed branch.
- 3
Implement the fix
Centralize scroll-lock lifecycle and add open, close, and unmount tests.
- 4
Run verification
Execute tests and builds and inspect desktop and mobile viewports.
Result
Scope, verification, and remaining risk are all visible
The change touches only navigation scroll-lock lifecycle, while tests cover user close, route changes, and component unmount.
MobileNavigation.test.tsx
New regression coverage
verification.md
Test, build, and browser-check results
change-summary.md
Cause, behavior change, and remaining risk
What this example demonstrates
Reliable changes begin with project conventions and current state management.
A successful tool call is not task completion; tests and browser behavior still need checking.
A scoped change summary makes human review faster.
Solve a real issue in your repository
Connect the repository and provide the goal, reproduction steps, and constraints.