From ba9ba8013b6212e7ac86dea561093699571a1246 Mon Sep 17 00:00:00 2001 From: zenn Date: Mon, 6 Apr 2026 13:28:31 +0900 Subject: [PATCH] ui: constrain tier editor item scroll --- docs/history.md | 5 ++++- docs/update.md | 6 +++++- frontend/src/views/TierEditorView.vue | 12 ++++++++++++ 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/docs/history.md b/docs/history.md index 7181822..bb74322 100644 --- a/docs/history.md +++ b/docs/history.md @@ -1,7 +1,10 @@ # 의사결정 이력 +## 2026-04-06 v1.4.94 +- 아이템 수가 많을 때 오른쪽 풀 때문에 페이지 전체가 길어지면 왼쪽 티어표까지 함께 움직여 방송/녹화 환경에서 기준 화면이 흔들릴 수 있다. 그래서 데스크톱에서는 오른쪽 사이드의 실제 화면 시작 위치를 감안해 높이를 제한하되, 제목과 검색창은 유지하고 아이템 그리드만 스크롤되게 하는 편이 더 적절하다고 정리했다. 모바일에서는 기존처럼 문서 흐름을 유지한다. + ## 2026-04-06 v1.4.93 -- 티어표 편집기의 아이템 풀 아래는 아이템 수가 적을 때 비어 보이기 쉬우므로, 이 공간에는 큰 기능보다 방해되지 않는 작은 작업 팁을 두는 편이 자연스럽다고 정리했다. 특히 우클릭 복제, 미사용 아이템 처리, 브라우저 확대/축소처럼 초반 시행착오를 줄여 주는 내용이 효과적이라고 판단했다. +- 티어표 편집기의 커스텀 이미지 추가 영역 아래는 아이템 수가 적을 때 비어 보이기 쉬우므로, 이 공간에는 큰 기능보다 방해되지 않는 작은 작업 팁을 두는 편이 자연스럽다고 정리했다. 특히 우클릭 복제, 미사용 아이템 처리, 브라우저 확대/축소처럼 초반 시행착오를 줄여 주는 내용이 효과적이라고 판단했다. ## 2026-04-06 v1.4.92 - 모바일 왼쪽 레일은 사용자 카드, 검색, 메뉴가 세로로 붙는 구조라 기본 `gap`이 빠지면 브라우저별 렌더링 차이에 따라 훨씬 답답하게 보일 수 있으므로, 이 영역 간격은 명시적으로 주는 편이 안전하다고 정리했다. diff --git a/docs/update.md b/docs/update.md index bc76739..5bfa975 100644 --- a/docs/update.md +++ b/docs/update.md @@ -1,7 +1,11 @@ # 업데이트 로그 +## 2026-04-06 v1.4.94 +- 티어표 편집 화면에서 아이템이 많을 때 오른쪽 아이템 사이드가 문서 높이를 밀어 왼쪽 티어표까지 함께 움직이던 흐름을 줄였다. 데스크톱에서는 오른쪽 사이드의 실제 화면 시작 위치를 감안해 높이를 제한하고, 아이템 그리드만 내부 스크롤되게 해 검색창은 위에 유지하면서 필요한 아이템을 찾아 가져올 수 있게 했다. +- 확인: `npm run build` + ## 2026-04-06 v1.4.93 -- 티어표 편집 화면의 아이템 풀 아래 빈 공간에는 작은 `작업 팁` 안내를 추가했다. 복수 사용, 미사용 아이템 미리보기/저장 제외, 브라우저 확대/축소 활용 같은 자주 묻는 흐름을 바로 확인할 수 있다. +- 티어표 편집 화면의 커스텀 이미지 추가 영역 아래에는 작은 `작업 팁` 안내를 추가했다. 복수 사용, 미사용 아이템 미리보기/저장 제외, 브라우저 확대/축소 활용 같은 자주 묻는 흐름을 바로 확인할 수 있다. - 확인: `npm run build` ## 2026-04-06 v1.4.92 diff --git a/frontend/src/views/TierEditorView.vue b/frontend/src/views/TierEditorView.vue index 64f116e..66953bd 100644 --- a/frontend/src/views/TierEditorView.vue +++ b/frontend/src/views/TierEditorView.vue @@ -2743,7 +2743,10 @@ onUnmounted(() => { object-fit: cover; } .sidebar { + --editor-sidebar-visible-offset: 136px; min-width: 0; + display: flex; + flex-direction: column; border: 1px solid var(--theme-border); background: linear-gradient(180deg, color-mix(in srgb, var(--theme-card-bg) 94%, transparent), color-mix(in srgb, var(--theme-card-bg-hover) 88%, transparent)); border-radius: 22px; @@ -2751,6 +2754,9 @@ onUnmounted(() => { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); position: sticky; top: 14px; + max-height: calc(100dvh - var(--editor-sidebar-visible-offset)); + overflow: hidden; + overscroll-behavior: contain; } .dropzone--board { @@ -3065,6 +3071,9 @@ onUnmounted(() => { color: var(--theme-text-faint); } .pool { + flex: 1 1 auto; + min-height: 0; + overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; @@ -3259,8 +3268,11 @@ onUnmounted(() => { } .sidebar { position: static; + max-height: none; + overflow: visible; } .pool { + overflow: visible; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }