Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

UI review (main 05f89591): projects, tasks, map and wiki defects

Open
  • Is something wrong?
#438 2 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
typescript
Domain
frontend

Research direction

This is a tracking review of eight measured layout defects, several of which overlap open PRs #374, #380, #381 and #414, so check those first. Start with the phone tab row (.ui-tabs__tab), the .top__audience button, a.set-row, input.search__input, and .search__chip at 390×844, then the task card title at 1440×900. Reproduce each measurement with the Playwright setup described, and treat an item as done when its measured box or wrap matches the referenced screen in docs/design/final/screens/.

Written by the indexing model from the issue text.

Description

bug

Refs #336

Measured in the running preview of main 05f89591 (demo data, signed in as Ada), Chromium in Docker (Playwright 1.62). Phone = 390×844, dpr 3, touch, mobile; desktop = 1440×900. Values come from getBoundingClientRect / scrollWidth in the page. Prostota references are docs/design/final/screens/*.webp.

Most layout differences from the drawn Tasks, Map, Wiki, Create task and New project screens are already being delivered by open PRs (#375 tasks, #380 map, #374 wiki, #377 create window, #381 new project, #414 phone shell). The items below are concrete defects in what main ships today; each one either survives those PRs or must be checked when they land.

  1. Phone project view tabs overflow the screen (390×844, light/dark, Chromium). .ui-tabs__tab (last tab, "Agents") ends at x = 397 px on a 390 px viewport, so it is cut by the right edge on Tasks, Map and Wiki. Expected: no chip/tab row on the phone; the title is the view menu (phone-tasks.webp, phone-viewsmenu.webp). Covered in direction by #414 (#341). Severity: medium.
  2. Phone project header audience button is a 22 px target (390×844). .top__audience ("Jonas and you, who can see this project") measures 106 × 22 px. Expected ≥ 44 × 44 px on touch (README §4 "Targets and text"). Severity: medium.
  3. Phone Projects list row target is 19 px tall (390×844). a.set-row "Community garden sensors" measures 222 × 19 px. Expected a full-width row ≥ 44 px tall like phone-projects.webp. Severity: medium.
  4. Phone Wiki title truncated (390×844). Wiki index h1 "Community garden sensors" has clientWidth 203 px vs scrollWidth 232 px (ellipsis) while there is room to wrap. Expected: the page title wraps (phone-wiki.webp, title 28–30 px). Severity: low.
  5. Phone search field is 42 px tall (390×844). input.search__input measures 308 × 42 px. Expected ≥ 44 px (phone-search.webp). Severity: low.
  6. Phone search filter chips run past the screen without an edge cue (390×844). .search__chip elements end at x = 448…787 px on a 390 px viewport (inside a horizontal scroller; page itself has no horizontal scroll). Expected per phone-search.webp: scope chips fit or the scroller shows that it continues. Severity: low (to confirm visually).
  7. Desktop task card title clipped to one line (1440×900, light). On the Tasks board the card span "From a message: Should the first sensors…" has clientWidth 301 px vs scrollWidth 515 px. Expected per desktop-tasks.webp: the title wraps to two lines before ellipsis. Severity: medium.
  8. Console error on the phone run: one Failed to load resource: 401 (Unauthorized) after sign-in on the phone context. Severity: low (to confirm source).

Not yet checked in this pass (time box): WebKit, 375×667, 820×1180 and 2560×1440 viewports, dark-mode contrast measurements, focus mode, attachments and task notice screens. They will be added as comments if found.

Dominant language
TypeScript
Stars
3
Forks
0
Avg merge
18h 3m
Merged PRs (30d)
254

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ColdPhase/flux

All issues in ColdPhase/flux

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.