Two elements share the id "empty", and the phone's CSS hits the wrong one
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 0
- Avg merge
- 1h 21m
- Merged PRs (30d)
- 41
Description
Two different elements are called `empty`, and on a phone the wrong one wins.
## The evidence
- `src/client/components/Thread.tsx:9` — the stage's "nothing to read yet" line is `
`.
- `src/client/components/PhoneEmpty.tsx:10` — the phone's "nothing needs you" screen is `
Both can be in the document at once: `PhoneEmpty` is a sibling of `#app`, and `#app` is only hidden by CSS, so the thread's paragraph is still in the DOM behind it.
Two consequences:
1. **The phone screen's CSS lands on the thread's paragraph.** `styles.css:3853` (inside `@media (max-width: 720px)`) gives `#empty` `display:flex`, centring, and `height: var(--visual-viewport-height, 100dvh)`. That selector also matches the `
` from `Thread.tsx`, so on any phone-width stage with an empty thread, that one line of text is stretched to a full viewport height inside the scroller.
2. **`document.getElementById("empty")` returns the thread's**, because it comes first in document order. Found while writing tests for #75: an assertion on `#empty` picked up `
Working.…
` when the intent was the phone screen. `tests/phone-landing.test.tsx` now asserts on `#empty-title` instead, with a comment pointing here.## Acceptance criteria
- [ ] The two elements have distinct ids.
- [ ] The phone's full-height centring rule applies only to the phone screen.
- [ ] Existing tests that reach for `#empty` or `#empty-title` still pass, or are updated with the rename.
- [ ] `pnpm typecheck` and `pnpm test` pass (note: four tests fail on `main` already — see the reasoning-effort issue).
## Out of scope
Any other id auditing across the cockpit.
## Related
- #75 — where this was found.
Contributor guide
Research direction
Start with the duplicate ids in src/client/components/Thread.tsx and src/client/components/PhoneEmpty.tsx, then inspect the mobile rule at styles.css:3853. Run tests/phone-landing.test.tsx first and update any selectors affected by the rename. Done means the ids are distinct, the full-height rule targets only the phone screen, and pnpm typecheck plus pnpm test pass, accounting for the four known main-branch failures.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 84/100