Adding flex basis to Header's provider

src/components/Header/component/Layout.stories.js

@@ -14,10 +14,10 @@ const FrameDecorator = story => (
   </div>
 )
 
-storiesOf('Components', module)
+storiesOf('Components /Header', module)
   .addDecorator(FrameDecorator)
-  .add('Connected Header', () => {
-    const provider = 'METAMASK'
+  .add('Connected', () => {
+    const provider = 'Metamask'
     const userAddress = '0x873faa4cddd5b157e8e5a57e7a5479afc5d30moe'
     const network = 'RINKEBY'
     const info = <ProviderInfo provider={provider} network={network} userAddress={userAddress} connected />
@@ -25,7 +25,7 @@ storiesOf('Components', module)
 
     return <Layout providerInfo={info} providerDetails={details} />
   })
-  .add('Disconnected Header', () => {
+  .add('Disconnected', () => {
     const info = <ProviderDisconnected />
     const details = <ConnectDetails />
 

src/components/Header/component/Provider.jsx

@@ -20,11 +20,12 @@ const styles = () => ({
     height: '100%',
     display: 'flex',
     alignItems: 'center',
+    flexBasis: '250px',
   },
   provider: {
     padding: `${sm} ${md}`,
     alignItems: 'center',
-    flex: '0 1 auto',
+    flex: '1 1 auto',
     display: 'flex',
     cursor: 'pointer',
   },

src/components/Header/component/ProviderDisconnected/index.jsx

@@ -5,7 +5,7 @@ import Paragraph from '~/components/layout/Paragraph'
 import Col from '~/components/layout/Col'
 import Img from '~/components/layout/Img'
 import { type Open } from '~/components/hoc/OpenHoc'
-import { sm, md } from '~/theme/variables'
+import { md } from '~/theme/variables'
 
 const connectWallet = require('../../assets/connect-wallet.svg')
 
@@ -19,11 +19,11 @@ const styles = () => ({
     fontFamily: 'Montserrat, sans-serif',
   },
   account: {
-    paddingRight: md,
-    paddingLeft: sm,
+    padding: `0 ${md}`,
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
+    flexGrow: 1,
   },
   connect: {
     letterSpacing: '-0.5px',

src/components/Header/component/ProviderInfo/index.jsx

@@ -32,6 +32,7 @@ const styles = () => ({
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
+    flexGrow: 1,
   },
   address: {
     letterSpacing: '-0.5px',