fix: 테이블 리스트 불필요한 스크롤 및 하단 공간 문제 해결
문제: - 고정 높이 (h-[400px] sm:h-[500px])로 인해 데이터가 적어도 큰 공간 차지 - 하단에 빈 공간이 남는데도 스크롤이 생기는 비효율적인 UX - overflow-y-scroll이 항상 스크롤바를 표시함 해결: - 고정 높이 제거 → flex-1 (부모의 남은 공간 차지) - overflow-y-scroll → overflow-y-auto (필요할 때만 스크롤) - 데이터 양에 따라 자동으로 높이 조정 개선 사항: ✅ 데이터가 적을 때: 불필요한 공간 없이 컴팩트하게 표시 ✅ 데이터가 많을 때: 자동으로 스크롤 생성 ✅ 반응형 레이아웃에 자연스럽게 적응 ✅ 스크롤바가 필요할 때만 표시되어 깔끔한 UI
This commit is contained in:
parent
310f43e1bd
commit
ff2a069b79
|
|
@ -1579,7 +1579,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
>
|
||||
{/* 스크롤 영역 */}
|
||||
<div
|
||||
className="w-full max-w-full h-[400px] overflow-y-scroll overflow-x-auto bg-background sm:h-[500px]"
|
||||
className="w-full max-w-full flex-1 overflow-y-auto overflow-x-auto bg-background"
|
||||
>
|
||||
{/* 테이블 */}
|
||||
<table
|
||||
|
|
|
|||
Loading…
Reference in New Issue