import { space } from 'styled-system';
import { preset } from 'react/styles/functions';
import styled from 'styled-components';
import { mixin } from 'react/components/UI/GenericInput';
import AutosizeInput from 'react-input-autosize';

const ChannelNameInput = styled(AutosizeInput).attrs({
  f: 8
})`
  input {
    ${mixin}
    ${space}
    ${preset(space, { mt: 3 })}
  }
`;

export default ChannelNameInput;

import { space } from 'styled-system';
import { preset } from 'react/styles/functions';
import styled from 'styled-components';
import { mixin, inputHorizontalPadding } from 'react/components/UI/GenericInput';
import AutosizeInput from 'react-input-autosize';

const ChannelNameInput = styled(AutosizeInput).attrs({
  f: 8
})`
  max-width: 100%;

  input {
    // Note: Autosize input has box-sizing "content-box". Here we subtract
    // padding in input to account for this when calculating max-width.
    max-width: calc(100% - ${inputHorizontalPadding} - ${inputHorizontalPadding}) !important;
    ${mixin}
    ${space}
    ${preset(space, { mt: 3 })}
  }

  div {
    box-sizing: content-box !important;
  }
`;

export default ChannelNameInput;

Make channel name input use max page width
Make channel name input use max page width
