message: Restructure chart header to wrap nicely
diff: @@ -60,17 +60,21 @@ const StyledHeader = styled.div`
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  + justify-content: space-between;
  span[role='button'] {
  display: flex;
  height: 100%;
  }
  + .title-panel {
  + display: flex;
  + align-items: center;
  + }
  +
  .right-button-panel {
  display: flex;
  - flex: 1 1 auto;
  align-items: center;
  - justify-content: flex-end;
  > .btn-group {
  flex: 0 0 auto;
  @@ -132,7 +136,8 @@ export class ExploreChartHeader extends React.PureComponent {
  this.props.chart.chartStatus,
  );
  return (
  - <StyledHeader id="slice-header" className="clearfix panel-title-large">
  + <StyledHeader id="slice-header" className="panel-title-large">
  + <div className="title-panel">
  <EditableTitle
  title={this.getSliceName()}
  canEdit={!this.props.slice || this.props.can_overwrite}
  @@ -167,8 +172,6 @@ export class ExploreChartHeader extends React.PureComponent {
  <i className="fa fa-edit" />
  </span>
  </TooltipWrapper>
  - </StyledButtons>
  - )}
  {this.props.chart.sliceFormData && (
  <AlteredSliceTag
  className="altered"
  @@ -176,6 +179,9 @@ export class ExploreChartHeader extends React.PureComponent {
  currentFormData={formData}
  />
  )}
  + </StyledButtons>
  + )}
  + </div>
  <div className="right-button-panel">
  {chartFinished && queryResponse && (
  <RowCountLabel
  