frontend-layering-specificity-debuglisted
Install: claude install-skill JinNing6/Noosphere
# Frontend Layering And Specificity Debug
## Diagnose Before Styling
1. Reproduce at the reported viewport and interaction state.
2. Record bounding boxes plus computed `font-size`, `line-height`, `width`, `height`, and `z-index`.
3. Compare equivalent element types. A `<button>` and an `<a>` that share a component class but render differently usually indicate a selector or user-agent boundary.
4. Enumerate matched CSS rules instead of inferring from source order alone.
5. Use `document.elementFromPoint()` at the overlap to identify the element that actually paints or receives input.
## Fix Typography Specificity
- Treat shorthand declarations such as `font: inherit` as resetting `font-size`, `font-weight`, and `line-height` together.
- Check specificity as well as order. `.app button` overrides `.button` even when `.button` appears later.
- In scoped resets, prefer `font-family: inherit` and explicit inherited properties. Keep component-level `font-size` and `line-height` authoritative.
- Add `white-space: nowrap` only to stable command controls; use responsive label collapse when the toolbar cannot fit.
- Verify computed styles on real `<button>`, `<a>`, `<input>`, and `<select>` elements after the fix.
## Fix Projected 3D Labels
- Remember that Drei `<Html>` is projected DOM, not canvas pixels. Its default `zIndexRange` is extremely high and can paint over an otherwise opaque drawer.
- Assign a bounded range such as `zIndexRange={[8, 1]}` for scene labels, then keep