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

Question

У меня есть ситуация, когда значок стрелки при применении переполнения обрезается: скрыто, как на этом рисунке

Вопрос в том, как я могу по-прежнему применяется переполнение: скрыто и в то же время не обрезается значок ??

Это код:

.side-panel {
  position: relative;
  height: 100%;
  background-color: $white;
  // border: 1px solid $box-separator;
  transition: all 0.3s;
  z-index: 100;
  overflow: hidden;
  &__button {
      position:absolute;
      top: 50%;
      right: 0;
      padding: 0;
      z-index: 100;
      transform: translateX(50%) translateY(-50%);
      transition: all 0.2s;
      &--show {
        visibility: visible;
        opacity: 1;
      }
      &--hide {
        visibility: hidden;
        opacity: 0;
      }
  }
  &__icon  {
    width:24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid $box-separator;
    background: $white;
    transition: all 0.2s;
    &:hover {
      box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.14);
    }
    &--init {
      padding-top: 1px;
      transition: all 0.2s ease-out;
    }
    &--clicked {
      padding-top: 1px;
      transform: rotate(180deg) !important;
    }
  }
}

Заранее спасибо!