Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

UI review (main 05f89591): phone shell, Home and Inbox defects

Aperta
  • Qualcosa non va?
#437 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
css, docker, playwright, typescript
Ambito
design, frontend, mobile

Direzione di ricerca

Start with the two most self-contained defects: the .ui-bottomnav__label font size in ui/ui.css around line 168, and the .composer__where overflow on the Home composer at 390px. Read docs/design/final/README.md §2 and §4 for the 12.5px meta minimum and the typography rules, and reproduce with the Playwright setup in Docker. Done means each listed defect is re-measured at 390×844 and 1440×900 and matches the design. Defects 1, 2, 5 and 8 need one focused fix each, and 7 and 8 may already be covered by #393, so check that PR first.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug

Visual review of the running preview at main 05f89591 (demo data, signed in as [email protected]), Playwright in Docker, Chromium. Phone 390×844 and 375×667 (dpr 3, touch, mobile), desktop 1440×900, light and dark. Design source: docs/design/final/README.md and screens/phone-home.webp, phone-inbox.webp, phone-inboxempty.webp, desktop-home.webp, desktop-inbox.webp.

Refs #336

Known gaps already covered by open PRs (not repeated as defects here): the phone tab bar still has four tabs (Home · Inbox · Messages · Projects, no Search, no capsule, chips row inside a project) → #414 (#341); phone Home still opens the private-drafts conversation with project view chips instead of the drawn Home (top three "Needs you", "Continue where you left off") and Inbox is not yet the one "Needs you" queue → #393 (#342); empty Inbox / loading mascot → #382 (#352).

Defects on main

  1. Tab bar labels are below the phone meta minimum. 390×844 and 375×667, light and dark, Chromium. .ui-bottomnav__label computed font-size: 11px (10.5px under 340px via ui/ui.css:168). Expected at least 12.5px (README §2 Typography "Meta: … at least 12.5 on the phone", §4 "Meta text is at least 12.5 px", S17). Ref phone-home.webp. Severity: medium.

  2. Home composer place line is clipped off-screen. 390×844 light, Chromium, /. .composer__where bounding right edge 464px on a 390px viewport; visible text ends "…private draft in Riverside Makers (demo), which o…" with an ellipsis mid-word, so the sentence explaining who can see the draft is unreadable. Expected: the line fits the viewport (wraps to two lines or is shortened) with no element extending past innerWidth. Severity: medium.

  3. Inbox action row is unbalanced on the phone. 390×844 light, /inbox. "Mark all read" is a quiet button whose label starts ~16px further in than the page text edge (icon inset), while "Settings" is a bordered secondary pill; the two controls have different visual weight and left edges, and the row has ~24px extra top padding above it compared with the list. Expected per phone-inbox.webp: one calm header row aligned to the content edge. Severity: low.

  4. Unread dot and "mark read" check crowd the row title. 390×844, /inbox, New section: the 8px unread dot sits ~16px from the title text and the check button directly to its right, so long titles ("Jonas Berg replied in "Should the first sensors measure soil moisture, or only tem…"") wrap to 3 lines and are cut with an ellipsis inside the quotes. Expected per phone-inbox.webp: title on one or two lines, meta and state at the row's end. Severity: low.

  5. Draft meta line spacing in mono. 390×844, /, private draft: meta "You · v1 · Thu, Oct 8, 12:46 PM" renders entirely in Geist Mono, so the word "You" and the separators get mono spacing ("You·v1·"). Expected: Geist for words, Geist Mono only for numbers and times (README §2 Typography). Severity: low.

  6. Inbox unread dot on the tab icon touches the icon. 390×844, .ui-bottomnav__dot at top:3px; right:14px overlaps the tray glyph's top-right corner instead of sitting clear of it. Severity: low.

  7. Phone Home shows a "Details" button in the top bar (.top__details) on Home, where the drawn phone Home has none (phone-home.webp). Severity: low (likely resolved by #414/#393; recheck after merge).

  8. Desktop Inbox: header and list start on different left edges. 1440×900 light, Chromium, /inbox. The page title "Inbox" starts at x≈284. The intro text, "New"/"Earlier" headings and rows start at x≈445 in a centred column, so the header floats away from the content it labels. The title also renders at ~16px instead of the 32/600 computer page title (README §2 Typography, desktop-inbox.webp). Severity: medium (the title size may be addressed by #393).

  9. Desktop sidebar: an extra "Notification settings" sub-row under Inbox. 1440×900, /inbox: .side__item 197×32 with a 12px label (.side__label), indented under Inbox. The drawn sidebar has only Home, Inbox (count) and Sketchbook (desktop-inbox.webp, README §4 Computer). It is also smaller than the 34px sibling rows. Severity: low.

Not checked in this pass (time box): WebKit, tablet 820×1180, keyboard focus order, dark-mode phone screenshots (sign-in throttling returned 429 for repeated logins), PWA install hint.

Lingua principale
TypeScript
Stelle
3
Fork
0
Merge medio
22h 53m
PR unite (30g)
272

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di ColdPhase/flux

Tutte le issue di ColdPhase/flux

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.