.list {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.list-item {
  display: flex; /* establish flex container */
  flex-direction: row; /* make main axis horizontal */
  justify-content: flex-start; /* center items vertically, in this case */
  align-items: center; /* center items horizontally, in this case */

  padding: 10px 10px;
  border-bottom: 1px solid #eee;
}
.list-item:last-child {
  border:none;
}

.list-item-icon {
  width: 40px;
  margin: 10px;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.list-item-description {
  width: 320px;
  .content {
    color: #333;
    font-size: 16px;
  }
  .time {
    color: #999;
    font-weight: 300;
    font-size: 12px;
    margin: 3px 0px;
  }
}

.list {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  height: 570px;
  overflow-y: scroll;
}

.list-item {
  display: flex; /* establish flex container */
  flex-direction: row; /* make main axis horizontal */
  justify-content: flex-start; /* flush items to the left */
  align-items: center; /* center items vertically */

  padding: 10px 10px;
  border-bottom: 1px solid #eee;
}
.list-item:last-child {
  border:none;
}

.list-item-icon {
  width: 40px;
  margin: 10px;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.list-item-description {
  width: 320px;
  .content {
    color: #333;
    font-size: 16px;
  }
  .time {
    color: #999;
    font-weight: 300;
    font-size: 12px;
    margin: 3px 0px;
  }
}

Make sidepanel's list to scroll when it overflows
Make sidepanel's list to scroll when it overflows
