CodeForPhilly / CodeForPhilly/codeforphilly-ng

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

未关闭
#163 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
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

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。