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

Signed-in header overflows at md–lg widths (768–1023px)

Open
  • Is something wrong?
#163 0 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
72/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
tailwindcss, typescript
Domain
accessibility, frontend

Research direction

Start at the AuthControls entry point and review plans/site-check-153.md and PR #154 for the related anonymous-state fix. Reproduce the signed-in header at 768–1023px, then verify the chosen name treatment keeps Help Wanted on one line with no horizontal document scroll while preserving the mobile bar and accessible account label.

Written by the indexing model from the issue text.

Description

Surfaced while closing out plans/site-check-153.md (PR #154), which fixed the anonymous-state overflow in the same band.

Tailwind's container is 768px wide across the whole 768–1023 range, leaving a 736px content box. Signed-out, the header now fits (measured 752px right edge at 768). Signed-in, AuthControls renders avatar + full name + caret (hidden sm:inline on the name), which is roughly 100px wider than the "Sign in" button, so the utility cluster pushes "Help Wanted" onto two lines and the document scrolls horizontally again. This predates #154 (the name + 192px search + Volunteer already exceeded the box).

Options: hide the name below lg in the desktop cluster only (the same AuthControls also renders in the mobile bar at 640–767, where there is room for it, so it needs a prop or a second breakpoint), or shorten to first name below lg. The aria-label="Account menu for …" already carries the accessible name, so hiding the visible text costs nothing for AT.

Dominant language
TypeScript
Stars
1
Forks
1
Avg merge
11m
Merged PRs (30d)
22

Getting set up

  • Ships a Dockerfile or Docker Compose file
  • No pull request template
  • No contributing guide

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 CodeForPhilly/codeforphilly-ng

All issues in CodeForPhilly/codeforphilly-ng

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.