jobizzness / jobizzness/bench

Two elements share the id "empty", and the phone's CSS hits the wrong one

Open Beginner friendly
#77 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.