king/dbx-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(project): 홈 화면도 한 화면 채움 레이아웃 — 내 업무 패널 자체 스크롤 확정

Browse Source 
홈 화면의 내 업무 패널이 max-height:calc(100vh-160px) 로는 뷰포트에 맞게
잘리지 않아 페이지 전체가 스크롤되고 패널 자체 스크롤바가 안 생겼다.
프로젝트 상세와 같은 방식으로 .pj-wrap 을 flex:1 로 늘리고 .pj-home 의
행을 1fr 로 확정해, 프로젝트 목록(좌)·내 업무(우)가 각자 안에서만 스크롤
하도록 변경. 커스텀 스크롤바는 트랙까지 연회색으로 그려 항상 보이게 하고
.pj-home-main 에도 적용.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
king
2026-09-15 23:28:19 +09:00
parent 3596e79096
commit 872a369c7c
4 changed files with 37 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/project.css
+34 -19
View File
@@ -43,9 +43,22 @@
.pj-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #eef0f2; color: #525860; font-size: 11px; font-weight: 600; }
.pj-chip-sm { padding: 1px 6px; font-size: 10px; }
/* ── 홈 ── */
.pj-home { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
@media (max-width: 980px) { .pj-home { grid-template-columns: 1fr; } }
/* ── 홈 — 프로젝트 상세와 같은 "한 화면 채움" 레이아웃. 페이지(.erp-page)는
스크롤하지 않고 프로젝트 목록(좌)·내 업무(우)가 각자 안에서만 스크롤.
.erp-page 는 flex column 이라 .pj-wrap 을 flex:1 로 늘려 남은 높이를
확보하고, .pj-home 의 행을 1fr 로 확정해야 자식 height:100% 가 먹는다. */
.erp-page > .pj-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 8px; }
.pj-home {
flex: 1 1 auto; min-height: 0;
display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: minmax(0, 1fr);
gap: 28px; align-items: stretch;
}
.pj-home-main { min-width: 0; min-height: 0; height: 100%; overflow-y: auto; padding-right: 4px; }
@media (max-width: 980px) {
.erp-page > .pj-wrap:not(.pj-project-view) { display: block; }
.pj-home { display: block; }
.pj-home-main { height: auto; overflow: visible; }
}
.pj-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.pj-project-card {
@@ -116,11 +129,13 @@
.pj-section-head-done { margin-top: 22px; }
.pj-section-head-done h2 { font-size: 14px; color: #6b7280; }
/* max-height 는 항상 값을 갖는 안전한 fallback(홈 화면처럼 부모가 고정
높이가 아닌 곳에서도 동작) — 프로젝트 상세 화면은 .pj-project-mytasks 가
더 구체적인 height:100% 로 덮어써서 화면 꽉 채움 레이아웃을 그대로 쓴다. */
.pj-home-side { width: 300px; border-left: 1px solid #eef0f2; padding-left: 24px; max-height: calc(100vh - 160px); overflow-y: auto; }
@media (max-width: 980px) { .pj-home-side { border-left: none; padding-left: 0; } }
/* 홈/프로젝트 상세 공통 "내 업무" 패널 — 부모 grid 행(1fr)에 맞춰 높이를
확정하고 자기 안에서만 스크롤. 300px 는 padding 포함(border-box). */
.pj-home-side {
width: 300px; box-sizing: border-box; min-height: 0; height: 100%; overflow-y: auto;
border-left: 1px solid #eef0f2; padding-left: 24px; padding-right: 4px;
}
@media (max-width: 980px) { .pj-home-side { border-left: none; padding-left: 0; height: auto; overflow: visible; } }
.pj-mytask-list { list-style: none; margin: 0; padding: 0; }
.pj-mytask a { display: flex; align-items: center; gap: 8px; padding: 9px 6px; border-radius: 8px; text-decoration: none; color: inherit; }
.pj-mytask a:hover { background: #f6f7f8; }
@@ -155,26 +170,26 @@
스크롤바 때문(호버해야만 잠깐 보이는 스타일). 여기 자체 스크롤 패널들은
막대가 항상 보이도록 커스텀 스크롤바를 그린다(윈도우 설정과 무관하게
고정 표시). */
.pj-home-side, .pj-project-mytasks, .pj-side, .pj-board {
scrollbar-width: thin; scrollbar-color: #c7c9cf transparent;
.pj-home-side, .pj-home-main, .pj-project-mytasks, .pj-side, .pj-board {
scrollbar-width: thin; scrollbar-color: #b9bcc4 #f1f2f4;
}
.pj-home-side::-webkit-scrollbar, .pj-project-mytasks::-webkit-scrollbar,
.pj-side::-webkit-scrollbar, .pj-board::-webkit-scrollbar { width: 8px; height: 8px; }
.pj-home-side::-webkit-scrollbar-track, .pj-project-mytasks::-webkit-scrollbar-track,
.pj-side::-webkit-scrollbar-track, .pj-board::-webkit-scrollbar-track { background: transparent; }
.pj-home-side::-webkit-scrollbar-thumb, .pj-project-mytasks::-webkit-scrollbar-thumb,
.pj-home-side::-webkit-scrollbar, .pj-home-main::-webkit-scrollbar, .pj-project-mytasks::-webkit-scrollbar,
.pj-side::-webkit-scrollbar, .pj-board::-webkit-scrollbar { width: 9px; height: 9px; }
.pj-home-side::-webkit-scrollbar-track, .pj-home-main::-webkit-scrollbar-track, .pj-project-mytasks::-webkit-scrollbar-track,
.pj-side::-webkit-scrollbar-track, .pj-board::-webkit-scrollbar-track { background: #f1f2f4; border-radius: 999px; }
.pj-home-side::-webkit-scrollbar-thumb, .pj-home-main::-webkit-scrollbar-thumb, .pj-project-mytasks::-webkit-scrollbar-thumb,
.pj-side::-webkit-scrollbar-thumb, .pj-board::-webkit-scrollbar-thumb {
background-color: #c7c9cf; border-radius: 999px;
background-color: #b9bcc4; border-radius: 999px;
}
.pj-home-side::-webkit-scrollbar-thumb:hover, .pj-project-mytasks::-webkit-scrollbar-thumb:hover,
.pj-side::-webkit-scrollbar-thumb:hover, .pj-board::-webkit-scrollbar-thumb:hover { background-color: #a7aab3; }
.pj-home-side::-webkit-scrollbar-thumb:hover, .pj-home-main::-webkit-scrollbar-thumb:hover, .pj-project-mytasks::-webkit-scrollbar-thumb:hover,
.pj-side::-webkit-scrollbar-thumb:hover, .pj-board::-webkit-scrollbar-thumb:hover { background-color: #979ba5; }
@media (max-width: 1280px) {
.pj-layout { grid-template-columns: 230px 1fr; }
.pj-project-mytasks { display: none; }
}
@media (max-width: 900px) {
.erp-page:has(> .pj-wrap) { max-width: 1550px; }
.pj-project-view { display: block; }
.erp-page > .pj-wrap.pj-project-view { display: block; }
.pj-layout { display: block; height: auto; }
.pj-side, .pj-main { height: auto; overflow: visible; }
}