LCFS - Dashboard Counter Values Cause Link Misalignment
- Dominant language
- Python
- Stars
- 7
- Forks
- 7
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 87
Description
**Describe the task**
Update the counter components on the main user dashboard so that associated links remain consistently aligned regardless of the number of digits displayed in the counter. Currently, when a counter displays double- or triple-digit values, the link shifts out of alignment with other dashboard links.
**Purpose**
Ensure a consistent and accessible dashboard layout by preventing content movement caused by changing counter values. Users should be able to scan dashboard actions efficiently without visual disruption, maintaining a predictable interface and improving usability for all users.
**Acceptance Criteria**
- [ ] Dashboard links remain vertically aligned regardless of whether counter values contain one, two, three, or more digits.
- [ ] Counter values expand to the left as additional digits are added, without affecting the position of the associated link.
- [ ] Layout remains consistent across supported browsers, screen sizes, and responsive breakpoints.
- [ ] The updated design does not introduce overlapping, truncation, or wrapping issues for counter values or links.
- [ ] The dashboard continues to meet WCAG 2.2 accessibility requirements for visual presentation, readability, and predictable user interfaces.
- [ ] Keyboard navigation and focus order remain unchanged following the layout update.
**Additional context**
- Current behaviour: links become misaligned when associated counters display double- or triple-digit values.
- Expected behaviour: links remain aligned with other dashboard links, while counter values grow to the left as the number of digits increases.
- Review the counter and link container layout to ensure it can accommodate varying number lengths without shifting adjacent content.
- Test using representative values (e.g., 1, 10, 99, 100, 999+) to validate consistent alignment and presentation.
Contributor guide
Research direction
Start by locating the main user dashboard's counter and link components, then inspect their shared container layout. Test representative values such as 1, 10, 99, 100, and 999+ across responsive sizes and supported browsers; done means links stay aligned, counters grow leftward without overlap or wrapping, and keyboard focus order is unchanged.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- python
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 65/100