CodeForPhilly / CodeForPhilly/codeforphilly-ng

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

Đang mở
#163 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
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

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.