seas-computing / seas-computing/mark-one
Mark-One: Navigation tab links do not take up the full width of the tabs
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 0
- Forks
- 1
- PR merge metrics
- No merged PRs in 30d
Description
Description
Mark-one navigation links do not occupy the full width of the tabs, and instead have a margin around them. This means that the actual a tag must be explicitly clicked on within the tab, rather than just anywhere within the tab itself(see screenshot)
To Reproduce
- Create new
TabList - Mouse over one of the tabs/links
<TabList>
<TabListItem><-- This element has the padding/margin applied to it -->
<a href="http://www.google.com">Google</a> <-- Not this one -->
</TabListItem>
</TabList>
Expected Behavior
The <a> tag should fill the entire width of a tab.
Actual Behavior
The <a> tag fills a small percentage of the tab, the rest being largely padding on the actual tab element
Screenshots
Platform:
- Platform Type:
- OS:
- Version:
- Browser:
- Version
Additional Information
- Test
- Docs
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by inspecting the TabList and TabListItem components and reproduce the issue by hovering over a tab. Trace which element receives the padding or margin, then make the anchor fill the tab's full width. Done means clicking anywhere within the tab activates the link rather than only the text area.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100