fix(project): 내 업무 패널 오른쪽 끝이 화면 밖으로 밀려 스크롤 막대가 안 보이던 진짜 원인 수정

.erp-page 는 width:100% + padding 24px 이고 border-box 리셋은 .erp-shell 에만
걸려 있어 content-box 로 계산된다. 프로젝트 화면에서 max-width:1550px 캡을
풀자(0a427be/04c33e3) 페이지가 뷰포트보다 48px 넓어졌고, 그 결과 우측 패널의
오른쪽 끝 — 네이티브 스크롤바든 JS 로 그린 막대든 그 자리 — 가 화면 밖으로
나가 보이지 않았다("처음엔 잘 나왔다"가 맞았음: 캡을 풀기 전엔 안 넘쳤다).
헤드리스 크롬으로 재현·좌표 덤프(패널 right=1917 > viewport 1911)해서
확인했고, .erp-page:has(> .pj-wrap) 에 box-sizing:border-box 를 주면 패널이
화면 안에 들어오며 막대가 그려지는 것까지 스크린샷으로 검증함.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
2026-09-16 00:01:06 +09:00
parent 41b6165144
commit 0ba6182574
4 changed files with 9 additions and 4 deletions
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %} {% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260916r" /> <link rel="stylesheet" href="/static/project.css?v=20260916s" />
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" /> <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
{% endblock %} {% endblock %}
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %} {% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260916r" /> <link rel="stylesheet" href="/static/project.css?v=20260916s" />
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" /> <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
{% endblock %} {% endblock %}
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %} {% extends "erp_base.html" %}
{% block head_extra %} {% block head_extra %}
<link rel="stylesheet" href="/static/project.css?v=20260916r" /> <link rel="stylesheet" href="/static/project.css?v=20260916s" />
<!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host --> <!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host -->
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" /> <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
<!-- 타임라인 vis-timeline — self-host --> <!-- 타임라인 vis-timeline — self-host -->
+6 -1
View File
@@ -150,7 +150,12 @@
그대로 쓰기 위해 휴가/쿠팡 모듈과 같은 패턴으로 .erp-page 의 flex 자식을 그대로 쓰기 위해 휴가/쿠팡 모듈과 같은 패턴으로 .erp-page 의 flex 자식을
늘려 남은 높이를 다 차지하게 하고, 가운데 폭 제한(max-width:1550px)도 늘려 남은 높이를 다 차지하게 하고, 가운데 폭 제한(max-width:1550px)도
이 화면에서만 풀어서 좌/우 칸이 진짜 화면 양 끝에 붙게 한다. */ 이 화면에서만 풀어서 좌/우 칸이 진짜 화면 양 끝에 붙게 한다. */
.erp-page:has(> .pj-wrap) { max-width: none; } /* box-sizing:border-box 필수 — .erp-page 는 width:100% + padding 24px 인데
border-box 리셋이 .erp-shell 에만 걸려 있어(content-box) max-width 캡을 풀면
뷰포트보다 48px 넓어진다. 그러면 우측 "내 업무" 패널의 오른쪽 끝(=스크롤
막대 자리)이 화면 밖으로 밀려나 막대가 절대 안 보인다(헤드리스 크롬 좌표
덤프로 확인: 패널 right=1917 > viewport 1911). */
.erp-page:has(> .pj-wrap) { max-width: none; box-sizing: border-box; }
.pj-project-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .pj-project-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pj-project-view .pj-layout { flex: 1 1 auto; min-height: 0; } .pj-project-view .pj-layout { flex: 1 1 auto; min-height: 0; }
/* grid-template-rows: minmax(0,1fr) 이 없으면 암시적 행이 "auto"(내용 크기)로 /* grid-template-rows: minmax(0,1fr) 이 없으면 암시적 행이 "auto"(내용 크기)로