Fix menu scrolling issue to prevent content from going above safe area

This commit resolves a dual-scrolling problem where users could scroll both
the outer modal container and the inner menu list, causing the menu content
to incorrectly scroll above the iOS safe area.

Changes:
- Added :has(.full-menu-list) selector to disable outer scroll only in menu component
- Applied flex layout specifically to menu containers using targeted CSS
- Enhanced .full-menu-list with proper flex properties for contained scrolling

This fix ensures:
- Only the menu list area scrolls, not the entire modal
- Fixed headers and navigation stay in place
- Menu content respects safe area boundaries
- No impact on other components using full-menu-modal (filters, details, etc.)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
2025-11-07 13:55:31 +09:00
parent 904e419850
commit 45cee4b53e

View File

@@ -18,6 +18,11 @@ main {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* 메뉴 컴포넌트에서만 외부 스크롤 방지 */
.full-menu-modal:has(.full-menu-list) {
overflow-y: hidden;
}
.tab-content{
overflow-y: unset;
}
@@ -95,6 +100,13 @@ main.home-main{
.full-menu-container{
padding-top: 50px;
}
/* 메뉴 컴포넌트에서만 flex 레이아웃 적용 */
.full-menu-container:has(.full-menu-list) {
height: 100%;
display: flex;
flex-direction: column;
}
/* pdw-16 클래스가 있는 경우 (settlement-detail 등)에만 safe area 적용 */
.full-menu-container.pdw-16{
padding-top: calc(50px + env(safe-area-inset-top));
@@ -150,6 +162,8 @@ main.home-main{
margin-top: 0;
width: 100%;
overflow-y: auto;
flex: 1;
height: 0; /* flex-grow를 위한 높이 초기화 */
}
.menu-category{
position: relative;