@@ -15,16 +15,27 @@ export default function Tabs({
1515 return (
1616 <Grid className={className}>
1717 <Grid.Item full as={Flex} wrap className="b-gray3 bb1">
18− {options.map(option => {
18+ {options.map((option, i) => {
1919 const isActive = option.value === currentTab;
20+ const isFirst = i === 0;
21+
2022 return (
2123 <Flex.Item
2224 key={option.value}
2325 onClick={() => onTabChange(option.value)}
24− className={cn('f5 pv3 mr6 clickable', {
25− 'black b-black bb1': isActive,
26− gray3: !isActive,
27− })}
26+ className={cn(
27+ 'f5 pv3 clickable',
28+ {
29+ 'black b-black bb1': isActive,
30+ gray3: !isActive,
31+ },
32+ {
33+ // all items have right margin/padding
34+ 'mr2 pr2': true,
35+ // the first one is flush to the left
36+ 'ml2 pl2': !isFirst,
37+ }
38+ )}
2839 style={{ marginBottom: '-1px' }}>
2940 {option.text}
3041 </Flex.Item>