CodeForPhilly / CodeForPhilly/codeforphilly-ng
Signed-in header overflows at md–lg widths (768–1023px)
- 主要语言
- TypeScript
- 星标
- 1
- 派生
- 1
- 平均合并
- 5 天 3 小时
- 30 天内合并 PR
- 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.
贡献指南
这个仓库没有索引到贡献指南
调研方向
从 AuthControls 入口开始,查看 plans/site-check-153.md 和 PR #154,了解相关的匿名状态修复。在 768–1023px 下复现已登录用户的页眉,然后验证所选择的名称处理方式能让 Help Wanted 保持在一行内,且不会出现文档水平滚动,同时保留移动端栏和可访问的账户标签。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- tailwindcss, typescript
- 领域
- accessibility, frontend
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 活跃
- 描述清晰度
- 基本清楚
- 新手友好度
- 72/100