<commit_before>import PropTypes from 'prop-types';
import React from 'react';
import { baseFonts } from '@storybook/components';

const wrapperStyle = {
  background: '#F7F7F7',
  marginBottom: 10,
};

const headingStyle = {
  ...baseFonts,
  textTransform: 'uppercase',
  letterSpacing: '1.5px',
  fontSize: '12px',
  fontWeight: 'bolder',
  color: '#828282',
  border: '1px solid #C1C1C1',
  textAlign: 'center',
  borderRadius: '2px',
  padding: '5px',
  cursor: 'pointer',
  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,
  backgroundColor: 'inherit',
  outline: 0,
};

const linkStyle = {
  textDecoration: 'none',
};

const Header = ({ openShortcutsHelp, name, url }) =>
  <div style={wrapperStyle}>
    <button style={shortcutIconStyle} onClick={openShortcutsHelp}>
      ⌘
    </button>
    <a style={linkStyle} href={url} target="_blank" rel="noopener noreferrer">
      <h3 style={headingStyle}>
        {name}
      </h3>
    </a>
  </div>;

Header.defaultProps = {
  openShortcutsHelp: null,
  name: '',
  url: '',
};

Header.propTypes = {
  openShortcutsHelp: PropTypes.func,
  name: PropTypes.string,
  url: PropTypes.string,
};

export default Header;<commit_msg>Update layout fix using flexbox<commit_after>import PropTypes from 'prop-types';
import React from 'react';
import { baseFonts } from '@storybook/components';

const wrapperStyle = {
  background: '#F7F7F7',
  marginBottom: 10,
  display: 'flex',
  height: 27,
};

const headingStyle = {
  ...baseFonts,
  textTransform: 'uppercase',
  letterSpacing: '1.5px',
  fontSize: '12px',
  fontWeight: 'bolder',
  color: '#828282',
  cursor: 'pointer',
  padding: 0,
  margin: 0,
  overflow: 'hidden',
};

const shortcutIconStyle = {
  textTransform: 'uppercase',
  fontSize: 12,
  fontWeight: 'bolder',
  color: 'rgb(130, 130, 130)',
  border: '1px solid rgb(193, 193, 193)',
  textAlign: 'center',
  borderRadius: 2,
  cursor: 'pointer',
  display: 'inlineBlock',
  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 }) => (
  <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>
  </div>
);

Header.defaultProps = {
  openShortcutsHelp: null,
  name: '',
  url: '',
};

Header.propTypes = {
  openShortcutsHelp: PropTypes.func,
  name: PropTypes.string,
  url: PropTypes.string,
};

export default Header;
{'fraction_non_alphanumeric': 0.1614550095724314, 'fraction_numerical': 0.037013401403956606, 'mean_word_length': 4.081037277147487, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6267105', 'n_tokens_mistral': 1199, 'n_tokens_neox': 1116, 'n_words': 276}