From 9fd92fac217eb91a50dd28b60ae87881addceb9a Mon Sep 17 00:00:00 2001
From: "usagi.f@gmail.com" <usagi.f@gmail.com>
Date: Wed, 30 Aug 2017 16:26:45 +0900
Subject: [PATCH] Update layout fix using flexbox

---
 .../ui/components/left_panel/header.js        | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/lib/ui/src/modules/ui/components/left_panel/header.js b/lib/ui/src/modules/ui/components/left_panel/header.js
index efa2e8d7f69d..a898bd03bb06 100755
--- a/lib/ui/src/modules/ui/components/left_panel/header.js
+++ b/lib/ui/src/modules/ui/components/left_panel/header.js
@@ -5,6 +5,8 @@ import { baseFonts } from '@storybook/components';
 const wrapperStyle = {
   background: '#F7F7F7',
   marginBottom: 10,
+  display: 'flex',
+  height: 27,
 };
 
 const headingStyle = {
@@ -14,51 +16,49 @@ const headingStyle = {
   fontSize: '12px',
   fontWeight: 'bolder',
   color: '#828282',
-  border: '1px solid #C1C1C1',
-  textAlign: 'center',
-  borderRadius: '2px',
-  padding: '5px',
   cursor: 'pointer',
+  padding: 0,
   margin: 0,
-  float: 'none',
   overflow: 'hidden',
 };
 
 const shortcutIconStyle = {
   textTransform: 'uppercase',
-  letterSpacing: '3.5px',
   fontSize: 12,
   fontWeight: 'bolder',
   color: 'rgb(130, 130, 130)',
   border: '1px solid rgb(193, 193, 193)',
   textAlign: 'center',
   borderRadius: 2,
-  padding: 5,
   cursor: 'pointer',
-  margin: 0,
   display: 'inlineBlock',
-  paddingLeft: 8,
-  float: 'right',
-  marginLeft: 5,
+  padding: 0,
+  margin: '0 0 0 5px',
   backgroundColor: 'inherit',
   outline: 0,
+  width: 30,
 };
 
 const linkStyle = {
   textDecoration: 'none',
+  flexGrow: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  border: '1px solid rgb(193, 193, 193)',
+  borderRadius: 2,
 };
 
-const Header = ({ openShortcutsHelp, name, url }) =>
+const Header = ({ openShortcutsHelp, name, url }) => (
   <div style={wrapperStyle}>
+    <a style={linkStyle} href={url} target="_blank" rel="noopener noreferrer">
+      <h3 style={headingStyle}>{name}</h3>
+    </a>
     <button style={shortcutIconStyle} onClick={openShortcutsHelp}>
       ⌘
     </button>
-    <a style={linkStyle} href={url} target="_blank" rel="noopener noreferrer">
-      <h3 style={headingStyle}>
-        {name}
-      </h3>
-    </a>
-  </div>;
+  </div>
+);
 
 Header.defaultProps = {
   openShortcutsHelp: null,