Убрать горизонтальный скролл в компоненет
В 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
Код компонентов прилагается.