CodeForPhilly / CodeForPhilly/codeforphilly-ng
Signed-in header overflows at md–lg widths (768–1023px)
- Ngôn ngữ chính
- TypeScript
- Star
- 1
- Fork
- 1
- Merge trung bình
- 5 ngày 3 giờ
- Pull request đã merge (30 ngày)
- 9
Mô tả
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.
Hướng dẫn đóng góp
Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này
Hướng nghiên cứu
Bắt đầu tại điểm vào AuthControls và xem xét plans/site-check-153.md cùng PR #154 để kiểm tra bản sửa lỗi liên quan đến trạng thái ẩn danh. Tái hiện header khi đã đăng nhập ở 768–1023px, sau đó xác minh rằng cách xử lý tên được chọn giữ Help Wanted trên một dòng, không có thao tác cuộn ngang tài liệu, đồng thời vẫn giữ thanh trên thiết bị di động và nhãn tài khoản có thể truy cập.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- tailwindcss, typescript
- Lĩnh vực
- accessibility, frontend
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Sôi nổi
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 72/100