Заказ закрыт
Исправить горизонтальное переполнение в React-компоненте с вложенными контейнерами

Бюджет: 500 руб
6.19 $ – 5.33 €
В React-приложении есть проблема с горизонтальным переполнением (overflow) в компоненте SessionActiveRequests, который вызывает появление глобального горизонтального скролла на странице.
Структура компонентов:

MainPage – основной контейнер с overflow-hidden
SessionActiveRequests – проблемный компонент, вызывает горизонтальное переполнение

Проблема:
Компонент SessionActiveRequests содержит список карточек активных запросов, который должен иметь внутренний горизонтальный скролл при переполнении. Однако вместо этого компонент расширяется за пределы родительского контейнера, создавая глобальный горизонтальный скролл на всей странице.
Текущая реализация:

Родительский контейнер имеет flex, min-w-0, overflow-x-hidden
SessionActiveRequests имеет внутренний div с overflow-x-auto
При большом количестве карточек или длинных заголовках происходит переполнение

Требуется:
Исправить горизонтальное переполнение так, чтобы SessionActiveRequests не выходил за пределы родительского контейнера
Сохранить внутренний горизонтальный скролл для списка карточек запросов
Убедиться, что кнопка "Запрос" остается видимой и не сжимается
Решение должно работать с Tailwind CSS

Стек:

Next.js
React
TypeScript
Tailwind CSS

Код компонентов прилагается.
Опубликован 12.10.2025 в 13:52
Заказ находится в архиве

Выберите способ верификации:

Обновите страницу после прохождения верификации.