seas-computing / mark-one

A UI component library for building React Apps (in development)
https://seas-computing.github.io/mark-one/
BSD 3-Clause "New" or "Revised" License
0 stars 1 forks source link

Mark-One: Navigation tab links do not take up the full width of the tabs #142

Open rmainwork opened 4 years ago

rmainwork commented 4 years ago

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

  1. Create new TabList
  2. 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

image

Platform:

Additional Information