/* Milestone timeline */
.milestone {
  display: flex;
  flex: 1 100%;
}

.bar {
  width: 20px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.submilestones {
  flex-direction: column;
  flex: 1 100%;
  margin-left: 3px;
  display: flex;
}

.vertical-text {
  transform: rotate(-90deg);
  white-space: nowrap;
}

.panel {
  margin-bottom: 3px;
}

.dashed > .panel {
  border-style: dashed;
}

/* Milestone level switching */
.milestone-content {
  width: 0px;
  visibility: hidden;
  white-space: nowrap;
  overflow-x: hidden;
}

.milestone.active > .milestone-content {
  width: 100%;
  visibility: visible;
}

.milestone.active > .bar {
  display: none;
}

.milestone.active .submilestones {
  flex: 0%;
}

/* Goals */
.goal {
  justify-content: space-between;
  display: flex;
}

.goal-content {
  white-space: normal;
  margin-left: 3px;
  flex-grow: 2;
}

/* Milestone timeline */
.milestone {
  display: flex;
  flex: 1 100%;
}

.bar {
  width: 20px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.submilestones {
  flex-direction: column;
  flex: 1 100%;
  margin-left: 3px;
  display: flex;
}

.vertical-text {
  transform: rotate(-90deg);
  white-space: nowrap;
}

.panel {
  margin-bottom: 3px;
}

.dashed > .panel {
  border-style: dashed;
}

/* Milestone level switching */
.milestone-content {
  width: 0px;
  visibility: hidden;
  white-space: nowrap;
  overflow-x: hidden;
}

.milestone.active > .milestone-content {
  width: 100%;
  visibility: visible;
}

.milestone.active > .bar {
  display: none;
}

.milestone.active .submilestones {
  flex: 0%;
}

/* Goals */
.goal {
  justify-content: space-between;
  display: flex;
}

.active > .stage-content .goal-content {
  white-space: normal;
  word-break: break-all;
  margin-left: 3px;
  flex-grow: 2;
}

Fix long goals displaying in wrapped mode
Fix long goals displaying in wrapped mode
