[Claude Code Cursor ] I assistant inefficient debugging approach - burned tokens on repeated failed attempts

Preflight Checklist

• [x] I have searched existing issues for similar behavior reports
• [x] This report does NOT contain sensitive information (API keys, passwords, etc.)

Type of Behavior Issue

Claude made incorrect assumptions about my project

What You Asked Claude to Do

There's been a bit of a visual shift on Hypandra on some browsers and monitors. When you click the three-line hamburger menu at the top or the user icon, the scroll bar on the side disappears, and everything shifts over just a tiny little bit. It's very annoying.

What Claude Actually Did

What Claude Actually Did

1. Used Explore agent to find components (appropriate)
2. Identified root cause: Radix UI applies data-scroll-locked="1" and overflow: hidden when menus open (correct diagnosis)
3. Created /src/hooks/useScrollbarCompensation.ts - iterated 3 times with increasingly complex MutationObserver logic
4. Modified /src/app/ClientLayout.tsx - added hook import and call
5. Modified /src/app/globals.css - added CSS rules attempting to override overflow behavior
6. Created then deleted /src/hooks/useScrollLock.ts
7. Tested repeatedly in browser without verifying success
8. Made multiple rounds of edits based on failed assumptions
9. Never solved the problem - scrollbar still disappeared and layout still shifted
10. Only at the very end suggested the user try react-remove-scroll library

In their own words:

The model (me) demonstrated poor debugging methodology:

• Made edits without properly verifying assumptions
• Didn't effectively use browser DevTools to trace actual CSS rule origins
• Kept trying variations of the same failing approach
• Burned tokens inefficiently
• Should have pivoted to library recommendations or admitted limitations much sooner
• Showed overconfidence in approaches that weren't working

Should have:

• Successfully prevented scrollbar from disappearing when menus open

• Prevented layout shift

• OR recognized limitations within 2-3 failed attempts and immediately

recommended react-remove-scroll library or other proven solutions

• OR used proper browser DevTools debugging to trace CSS rule origins

before making edits

Expected Behavior

Should have:

• Successfully prevented scrollbar from disappearing when menus open
• Prevented layout shift
• OR recognized limitations within 2-3 failed attempts and immediately recommended react-remove-scroll library or other proven solutions
• OR used proper browser DevTools debugging to trace CSS rule origins before making edits

Files Affected

1. /Users/trevanhypandra/hypandra/src/hooks/useScrollbarCompensation.ts - Created (multiple iterations)
  2. /Users/trevanhypandra/hypandra/src/app/ClientLayout.tsx - Modified (added hook import/usage)
  3. /Users/trevanhypandra/hypandra/src/app/globals.css - Modified (added CSS rules multiple times)
  4. /Users/trevanhypandra/hypandra/src/hooks/useScrollLock.ts - Created then deleted
                                                                              
  Files Accessed (Read Only)                                                  
                                                                              
  - /src/components/ui/dialog.tsx                                             
  - /src/components/ui/dropdown-menu.tsx                                      
  - /src/app/layout.tsx                                                       
  - /src/app/ClientLayout.tsx                                                 
  - /src/app/globals.css                                                      
  - package.json                                                              
  - And various others via Explore agent

Permission Mode

Accept Edits was ON (auto-accepting changes)

Can You Reproduce This?

Yes, every time with the same prompt

Steps to Reproduce

I don't have any tokens left, but according to Claude Code.
I could reproduce it if:

1. The local dev server is running (bun dev at localhost:3000)
2. I have Playwright browser access (which I do)
3. I can navigate to the page and interact with it (which I demonstrated doing)
4. The codebase is in a state where the issue exists

However, I couldn't reproduce it independently without:

• Your specific codebase
• Your local environment setup
• Access to localhost

So it's reproducible within your project's context, but not standalone. A proper reproduction would require you (or someone with access) to visit localhost:3000 with your current code and click the hamburger menu to observe the scrollbar shift.

Claude Model

Haiku

Relevant Conversation

Impact

Medium - Extra work to undo changes

Claude Code Version

claude-haiku-4-5-20251001 (Claude Haiku 4.5)

Platform

Anthropic API

Additional Context

1. First correction about my methodology:

"I don't think you need to ask Playwright to take a screenshot. You can just ask me to click it. It's not working still. I'm clicking on the local host you just launched."

1. Direct feedback about my approach:

"This seems pretty simple. If you think I should go elsewhere to figure it out and then come back to tell you I will do so."

1. Repeated failures:

"Nothing's changed. It still is not working."
"It still is not working. I'm clicking on the local host you just launched."
"didnt work- should we give up?"
"didnt work and I am almost out of tokens"

1. Your honest assessment:

"You failed. I don't know if this is helpful, but I'm copying the inspect for you on this page."