# LESSONS LEARNED - Dropdown Behind Cards Investigation
Date: 2025-09-13 18:55

## CRITICAL MISTAKES MADE

### 1. MDP Protocol Violations
- Applied fixes without completing investigation
- Created 4+ CSS files in fix-test cycles (cowboy coding)
- No backup before initial changes
- Didn't verify assumptions with browser data

### 2. Wrong Assumptions
- Assumed z-index alone would fix issue
- Assumed transform was the cause without verification
- Didn't check if CSS was actually loading/applying

### 3. Poor Investigation
- Didn't get computed values before attempting fixes
- Didn't verify CSS selector matching
- Didn't test in isolation first

## WHAT SHOULD HAVE BEEN DONE

### Proper Investigation Order:
1. Get computed z-index values for both elements
2. Check what creates stacking contexts
3. Verify CSS is loading and selectors match
4. Test single fix in browser DevTools first
5. Only then modify files

### Proper Testing:
- Use browser DevTools Computed tab
- Check Network tab for CSS loading
- Verify selectors match actual HTML
- Test CSS changes in DevTools before files

## RED FLAGS MISSED
1. Multiple !important declarations = CSS war
2. Transform + z-index = stacking context issue
3. Position changes = can break Bootstrap positioning
4. Can't verify = shouldn't proceed

## TIME WASTED
- 3+ hours on failed attempts
- Created/deleted 4 CSS files
- Multiple base.html modifications
- Still not fully resolved

## KEY INSIGHTS
1. **Stacking contexts are complex** - z-index doesn't work across different contexts
2. **Browser DevTools essential** - Can't fix what you can't measure
3. **MDP exists for a reason** - Skipping steps creates more problems
4. **One fix at a time** - Multiple simultaneous changes = debugging nightmare

## FOR NEXT DEVELOPER
- Issue remains: Dropdown behind cards
- Suspected cause: Transform creating stacking context
- Unable to verify without browser console access
- Consider JavaScript solution or redesign without transform