chore: Adjust styles, pass classNames

newrelic · Jun 2, 2021 · 5ff0def · 5ff0def
1 parent 2d14d2a
commit 5ff0def
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/src/components/PageLayout/Header.js b/src/components/PageLayout/Header.js
@@ -2,11 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 
-const Header = ({ title, children }) => (
+const Header = ({ title, children, className }) => (
   <header
+    className={className}
     css={css`
       grid-area: page-header;
       display: flex;
+      flex-wrap: wrap;
       align-items: baseline;
       justify-content: space-between;
       border-bottom: 1px solid var(--divider-color);
@@ -37,6 +39,7 @@ const Header = ({ title, children }) => (
 );
 
 Header.propTypes = {
+  className: PropTypes.string,
   children: PropTypes.node,
   title: PropTypes.string.isRequired,
 };

diff --git a/src/components/Tabs/Bar.js b/src/components/Tabs/Bar.js
@@ -43,7 +43,7 @@ MobileTabControl.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-const Bar = ({ children }) => {
+const Bar = ({ children, className }) => {
   const detectMobile = useMobileDetect();
   const isMobile = detectMobile.isMobile();
 
@@ -53,11 +53,13 @@ const Bar = ({ children }) => {
 
   return (
     <div
+      className={className}
       role="tablist"
       css={css`
         display: flex;
+        width: 100%;
         margin-bottom: 1em;
-        overflow: scroll;
+        overflow: auto;
       `}
     >
       {React.Children.map(children, (child, index) =>
@@ -69,6 +71,7 @@ const Bar = ({ children }) => {
 
 Bar.propTypes = {
   children: PropTypes.node.isRequired,
+  className: PropTypes.string,
 };
 
 export default Bar;
diff --git a/src/components/Tabs/BarItem.js b/src/components/Tabs/BarItem.js
@@ -29,7 +29,6 @@ const BarItem = ({ index, children, id, count, disabled }) => {
         user-select: none;
         white-space: nowrap;
 
-
         .dark-mode & {
           border-bottom-color: var(--color-dark-300);
         }
@@ -123,7 +122,7 @@ const BarItem = ({ index, children, id, count, disabled }) => {
 };
 
 BarItem.propTypes = {
-  index: PropTypes.number.isRequired,
+  index: PropTypes.number,
   children: PropTypes.node.isRequired,
   id: PropTypes.string.isRequired,
   count: PropTypes.number,