Юрий

Вариантов куча, на самом деле.
1) Жёстко заданная ширина для блока со свайпером (через calc, ширину экрана и ширину колонки). Даст overflow из контейнера справа, но если ширину считать правильно, горизонтальной прокрутки не будет.
2) Отрицательный margin-right для блока со свайпером (снова через calc, ширину экрана и ширину контейнера). То же самое насчёт overflow.
3) Вообще убрать контейнер и левой половине сделать нужный отступ слева. Считается так же через calc. Оверфлоу не будет.
4+++) Всякие разные варианты с абсолютом, но это уже эзотерика.

Первые два даже набросал примерно:

Сделать блоку левый паддинг, иконку поставить абсолютом:

Ширина сайдбара у вас задана изначально, так что вообще никаких проблем:

Добавьте градиенту пиксель ширины:

background: radial-gradient(circle at 30px 30px, transparent 30px, white 31px) -30px -30px;

.button:first-of-type {
  grid-column: 1 / span 3;
}

Но лучше конечно нужной кнопке добавить ещё класс, а не делать через first-of-type. Ещё придётся у .button поправить border-radius.

С чего тексту переноситься, если это одно слово, без пробелов?

word-break: break-word;

Без CSS конечно можно только гадать, потому что все телепаты в отпуске, но скорее всего у вашего лейбла не сброшен display. Который по умолчанию inline и, соответственно, указание ширины игнорирует. Сделайте display: block или display: flex.

И кстати ваш for="app__design" в лейбле тоже работать не будет, потому что на инпуте нет соответствующего id.