TImeline Display Issues

Expected behavior I would expect the timeline widget to fill the parent element.

Actual behavior The formatting is crunched together and does not respond fluidly to the resizing of the display. See: https://i.imgur.com/iKOc3eZ.png

Resources (screenshots, code snippets etc.)

<div *ngIf="currentRequest$ | async as existingrequest; else loading"
     class="row">

  <div class="col-6">

  Omitted for brevity

  </div>

  <div class="col-6">
    <div class="row">
      <div class="col">
         Omitted for brevity
      </div>


      <div class="col">

     Omitted for brevity

      </div>
    </div>


    <div class="row">
      <div class="timeline-main">
        <ul class="stepper stepper-vertical timeline timeline-basic">
          <li *ngFor="let event of existingrequest.requestHistory; index as i; even as isEven; odd as isOdd">
            <a>
              <span [ngClass]="{'primary-color': isOdd, 'secondary-color': isEven}"
                    class="circle z-depth-1-half">

                <mdb-icon *ngIf="event.refHistoryEventId == 1"
                          fas
                          icon="question">
                </mdb-icon>
                <mdb-icon *ngIf="event.refHistoryEventId == 2"
                          far
                          icon="thumbs-up">
                </mdb-icon>
                <mdb-icon *ngIf="event.refHistoryEventId == 3"
                          fas
                          icon="times">
                </mdb-icon>
                <mdb-icon *ngIf="event.refHistoryEventId == 4"
                          fas
                          icon="backspace">
                </mdb-icon>
                <mdb-icon *ngIf="event.refHistoryEventId == 5"
                          fas
                          icon="toggle-off">
                </mdb-icon>
                <mdb-icon *ngIf="event.refHistoryEventId == 6"
                          fas
                          icon="check">
                </mdb-icon>
                <mdb-icon *ngIf="event.refHistoryEventId == 7"
                          fas
                          icon="clipboard-list">
                </mdb-icon>
                <mdb-icon *ngIf="event.refHistoryEventId == 8"
                          fas
                          icon="wrench">
                </mdb-icon>
                <mdb-icon *ngIf="event.refHistoryEventId == 9"
                          fas
                          icon="edit">
                </mdb-icon>
                <mdb-icon *ngIf="event.refHistoryEventId > 9"
                          fas
                          icon="ellipsis-h">
                </mdb-icon>
              </span>
            </a>

            <div class="step-content z-depth-1 ml-xl-0 p-4">
              <h4 class="font-weight-bold"> {{ event.refHistoryEvent.event }}</h4>
              <p class="text-muted mt-3">
                <i aria-hidden="true"
                   class="far fa-clock">
                </i> {{ getEventTimestampDetails(event) }}
              </p>
              <p class="mb-0">{{ event.details }}</p>
            </div>

          </li>
        </ul>
      </div>
    </div>


  </div>
</div>

<ng-template #loading>
  <div class="row mb-4">
    <div class="col-12 mx-auto">
      <mdb-progress-bar class="progress primary-color-dark"
                        mode="indeterminate">
      </mdb-progress-bar>
    </div>
  </div>
</ng-template>