FedotovaAnna

Ну это дизайнерские косяки))
Как бы по хорошему это делал я:
1. адаптив (но это отдельная тема)
2. для десктопа минимальная ширина в которую влезает конент, Уже - либо адаптив, либо горизонтальный скролл
3. хэдер на всю ширину
4. сайдбар прибит к левому краю
5. контент (сам дэшборд) растягивается на всю оставшуюся ширину
6. ну а вот содержимое контента уже надо смотреть... в терминологии флексбоксов: или flex-flow: row wrap, или width:25%, или justify-content: space between.

UPD: Назло ленивому дизайнеру можно сделать экран фиксированной ширины и отцентровать его на сером фоне (того же цвета что и бэкграунд в Фигме).

Это полноразмерное приложение и в рамки его вообще загонять не нужно. Ограничь по ширине контент и это все, что требуется.

Для начала наш бэк должен уметь отвечать на запрос вида "дай мне N товаров после товара X", иначе такая кнопка в принципе не имеет смысл.
Так вот, при нажатии на кнопку "Показать больше" мы первым делом должны ее заблокировать (чтоб пользователь не на тыкал лишнего) и показать лоадер (вдруг инет пользователя медленный), а затем отправить наш запрос к бэку, чтоб он дал нам данные о дополнительных товарах.
Когда данные загрузились, отрисовываем их в конец и в зависимости от того, есть ли у бэка еще товары (это он тоже должен нам сказать) мы или разблокируем или прячем кнопку "Показать больше".
Все.