Потому что событие срабатывает на .config-panel__text, а не на .config-panel, а блок с текстом за счёт заголовка и паддингов как раз начинается ниже и правее, чем ваша панель. То есть clientX и clientY у эвента оказываются больше ожидаемых.
У вас .row от бутстрапа и внутри него три колонки с жёстко заданной шириной, которая в сумме равна 100%. Чего вы там собрались распределять по ширине флекса?
Margin Collapsing
Можете поменять бордер на padding-top: 1px, это точно отключит схлопывание границ. Возможно, есть и получше варианты, с утра не соображу )
С дефолтным box-sizing паддинги и маргины не входят в размеры элементов, а прибавляются к ним.
Так что у ваших .task__added ширина получается 100% + 15px. Лечится элементарно:
Очередной наркоманский баг Сафари. В 14 версии, судя по всему, таки пофикшен.
Как вариант, можно добавить сроке .flex-lg-nowrap, чтобы она в принципе не переносилась на разрешениях, где должно всё входить в одну строчку.
