From 1d3f344aa31d3efdfee68e55220696063dc34df2 Mon Sep 17 00:00:00 2001
From: king <heoseungpil@gmail.com>
Date: Tue, 15 Sep 2026 22:46:40 +0900
Subject: [PATCH] =?UTF-8?q?fix(project):=20=EB=B3=B4=EB=93=9C=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=EB=B0=94=EA=B0=80=20=EB=A7=88=EC=A7=80?=
 =?UTF-8?q?=EB=A7=89=20=EC=84=B8=EC=85=98=20=EC=97=B4=EC=9D=84=20=EA=B0=80?=
 =?UTF-8?q?=EB=A6=AC=EB=8D=98=20=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

pj-board 에 scrollbar-gutter:stable 적용 — 스크롤바 자리를 항상 미리
비워둬서, 매이슨리 열 너비를 계산하는 시점(clientWidth)과 실제 스크롤바
등장 시점이 어긋나 마지막 열이 스크롤바에 가려 보이던 문제 해결.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/modules/project/templates/project/inbox.html   | 2 +-
 app/modules/project/templates/project/index.html   | 2 +-
 app/modules/project/templates/project/project.html | 2 +-
 app/static/project.css                             | 9 ++++++++-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/modules/project/templates/project/inbox.html b/app/modules/project/templates/project/inbox.html
index 6426c9a..33db87f 100644
--- a/app/modules/project/templates/project/inbox.html
+++ b/app/modules/project/templates/project/inbox.html
@@ -1,7 +1,7 @@
 {% extends "erp_base.html" %}
 
 {% block head_extra %}
-<link rel="stylesheet" href="/static/project.css?v=20260916j" />
+<link rel="stylesheet" href="/static/project.css?v=20260916k" />
 <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
 {% endblock %}
 
diff --git a/app/modules/project/templates/project/index.html b/app/modules/project/templates/project/index.html
index c45d5f1..ab47e4d 100644
--- a/app/modules/project/templates/project/index.html
+++ b/app/modules/project/templates/project/index.html
@@ -1,7 +1,7 @@
 {% extends "erp_base.html" %}
 
 {% block head_extra %}
-<link rel="stylesheet" href="/static/project.css?v=20260916j" />
+<link rel="stylesheet" href="/static/project.css?v=20260916k" />
 <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
 {% endblock %}
 
diff --git a/app/modules/project/templates/project/project.html b/app/modules/project/templates/project/project.html
index 81d6b8c..80c221f 100644
--- a/app/modules/project/templates/project/project.html
+++ b/app/modules/project/templates/project/project.html
@@ -1,7 +1,7 @@
 {% extends "erp_base.html" %}
 
 {% block head_extra %}
-<link rel="stylesheet" href="/static/project.css?v=20260916j" />
+<link rel="stylesheet" href="/static/project.css?v=20260916k" />
 <!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host -->
 <link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
 <!-- 타임라인 vis-timeline — self-host -->
diff --git a/app/static/project.css b/app/static/project.css
index 43e4af0..d5050b6 100644
--- a/app/static/project.css
+++ b/app/static/project.css
@@ -221,7 +221,14 @@
    높이를 정해준다). pj-board-canvas = 매이슨리 절대배치 캔버스 — 스크롤
    컨테이너 자체 높이와 콘텐츠(캔버스) 높이 계산을 분리해야 스크롤이
    올바르게 생긴다(캔버스만 커지고 뷰포트는 flex 크기를 유지). */
-.pj-board { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 4px; padding-bottom: 8px; }
+/* scrollbar-gutter:stable — 스크롤바 자리를 항상 미리 비워둔다. 이게 없으면
+   렌더 시점에 스크롤바가 아직 안 생긴 상태로 clientWidth를 재서 열 너비를
+   계산했다가, 막상 스크롤바가 생기면 그만큼 폭이 줄어 마지막 열이 스크롤바
+   에 가려 보였다. */
+.pj-board {
+  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
+  scrollbar-gutter: stable; padding-right: 4px; padding-bottom: 8px;
+}
 .pj-board-canvas { position: relative; }
 /* 세션(보드 컬럼) — 배경이 페이지와 거의 같으면 구분이 안 되므로(#f6f5fb ≈
    흰 배경) 뚜렷한 회색 톤 + 테두리로 아사나처럼 컬럼 경계를 분명히 준다.