React Semantic UI - компонент Step не отображается должным образом на карте

Question

Я использую семантический интерфейс для визуальных компонентов React.Существуют проблемы с отображением компонентов Step, содержащихся в Designed Card.Несмотря на то, что я установил компонент Card как жидкий в коде, показанном ниже.

<Card fluid raised>

При просмотре через рабочий стол он выходит за пределы карты, как показано ниже:

Однако при просмотре работает нормальночерез мобильный.Он хорошо укладывается вертикально в компонент карты, как показано ниже:

Мой код соответствует приведенному ниже.

// Confirmation.jsx
import React, { Component } from 'react';
import { Label, Header, Card, Form, Button, Container, Icon, Step } from 'semantic-ui-react';




class Confirmation extends Component{
    saveAndContinue = (e) => {
        e.preventDefault();
        this.props.nextStep();
    }

    back  = (e) => {
        e.preventDefault();
        this.props.prevStep();
    }

    render(){
        const {values: {  companyName, phoneno, email, subscription, shopregno, gstin, ownername, owneremail, ownerphone, customerservice, address, position  }} = this.props;

        return(


            <Container>
              <Header as='h2' icon textalign='center'>
                              <Icon name='users' circular />
                              <Header.Content>REGISTRATION</Header.Content>
                </Header>
            <Card.Group>
             <Card fluid raised>
               <Card.Content>
                  <Card.Header>
                  <Step.Group>
                    <Step completed>
                      <Icon name='user' />
                      <Step.Content>
                        <Step.Title>Customer Details</Step.Title>
                        <Step.Description>Enter the customer details</Step.Description>
                      </Step.Content>
                    </Step>

                      <Step completed>
                      <Icon name='map marker alternate' />
                      <Step.Content>
                        <Step.Title>Map Details</Step.Title>
                        <Step.Description>Enter Location information</Step.Description>
                      </Step.Content>
                    </Step>


                    <Step completed>
                      <Icon name='book' />
                      <Step.Content>
                        <Step.Title>Category Details</Step.Title>
                        <Step.Description>Enter Category information</Step.Description>
                      </Step.Content>
                    </Step>

                    <Step completed>
                      <Icon name='servicestack' />
                      <Step.Content>
                        <Step.Title>Service Details</Step.Title>
                        <Step.Description>Enter Service information</Step.Description>
                      </Step.Content>
                    </Step>

                    <Step completed>
                      <Icon name='address card' />
                      <Step.Content>
                        <Step.Title>Owner Details</Step.Title>
                       <Step.Description>Enter Owner information</Step.Description>

                      </Step.Content>
                    </Step>

                   <Step active>
                       <Icon name='info' />
                      <Step.Content>
                        <Step.Title>Confirm Registration</Step.Title>
                        <Step.Description>Finalize & Confirm</Step.Description>

                      </Step.Content>
                    </Step>

                  </Step.Group>

                  </Card.Header>
               </Card.Content>





             <Card.Content extra>

                <Button secondary onClick={this.back}>Back</Button>
                <Button primary onClick={this.saveAndContinue}>Save And Continue </Button>
             </Card.Content>



         </Card>
       </Card.Group>





    </Container>



        )
    }
}

export default Confirmation;

Я попробовал метод, предложенныйДжейк, который добавляет полосу прокрутки к Step.Group, как показано ниже:

Не совсем идеальное решение, поскольку полоса прокрутки не перемещается автоматически к активному шагу.

Любая помощь будет высоко оценена, чтобы решить эту ошибку.Из документации по семантическому интерфейсу я понимаю, что есть предустановка ширины для компонента карты.Как изменить заданную ширину, переопределив ее?