CodeForPhilly / CodeForPhilly/codeforphilly-ng

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

オープン
#163 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
TypeScript
スター
1
フォーク
1
平均マージ
5日 3時間
マージ済み PR(30日)
9

説明

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.

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
tailwindcss, typescript
領域
accessibility, frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
活発
明瞭さ
おおむね明確
初心者へのやさしさ
72/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。