Когда кнопка «Копировать» меняется на «Скопировано», расположенная рядом кнопка нажимается вправо

Question

Кнопка Копировать при нажатии перемещает Нажмите кнопку вправо. Я хочу, чтобы слово «Копировать» росло влево, когда оно повернуто на «Скопировано», а не вправо, чтобы оно не влияло на кнопку «Просмотр».

Следующий код показывает, как я подхожу к этому. Но затем, когда текст меняет Скопированный, но нажимает кнопку просмотра вправо, и кнопка просмотра пересекает отступы.

/////// CSS ///////

export const Container = styled.div`
  display: grid;
  grid-template-columns: 482px;
  width: 482px;
  height: 300px;
`;

export const SubContainer = styled.div`
  position: relative;
  box-sizing: border-box;
  border: 1px solid grey;
  border-radius: 5px;
  max-height: 300px;
`;

export const Header = styled.div`
  display: grid;
  grid-template-columns: 363px max-content min-content;
  grid-column-gap: 8px;
  grid-template-rows: 22px;
  border-bottom: 1px solid red;
  padding: 12px 16px 8px 16px;
`;

export const Title = styled.div`
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  padding-top: 2px;
  justify-content: center;
`;

export const Button = styled.a`
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
`

/////// React ///////

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      copied: false
    }
  }

  copyToClipboard = () => {
    this.setState({copied: true}, () => {
      setTimeout( () => {
        this.setState({copied: false})
    }, 2000)
    })
  }

  render() {
    return (
      <Container>
        <SubContainer>
          <Header>
              <Title className='title'>Heading</Title>
              <Button
                text={copied ? 'Copied' : 'Copy'}
                onClick={this.copyToClipboard}
              />
              <Button primary text="View"/>
          </Header>
        </SubContainer>
     </Container>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Answer 1

Мне удалось исправить это, настроив сетку-шаблон-столбцы в компоненте стиля заголовка.

export const Header = styled.div`
  display: grid;
  grid-template-columns: 358px 50px 40px;
  grid-template-rows: 22px;
  border-bottom: 1px solid red;
  padding: 12px 16px 8px 16px;
`;

Таким образом, кнопка Копировать , когда она расширяется, копируется, но не ' t pu sh кнопка Вид вправо