fix(cafe24): 예약·버전이력을 펼쳐도 편집기 크기 유지 — 오른쪽 칸만 스크롤

「예약 적용」이나 「버전 이력」을 펼치면 코드 칸이 눌려 작아졌다. .cf24-code 와
.cf24-editor-form 이 flex: 1 1 auto 라 아래 내용이 늘어나면 그만큼 편집기가 줄어드는
구조였다 — 펼칠 때마다 보고 있던 위치를 잃는다.

둘을 flex: 0 0 auto 로 바꾸고 코드 칸에 height: 56vh 를 줬다. 무엇을 펼쳐도 높이가
그대로이고, 늘어난 내용은 아래로 밀리며 오른쪽 칸(.cf24-pane-editor)이 스크롤된다.
vh 를 쓴 것은 창 크기에 적응하기 위함이다(고정 px 는 작은 화면에서 넘친다).

56vh 는 실측으로 고른 값이다. 62vh 는 접힌 상태에서도 51px 넘쳐 요약줄이 잘렸고,
56vh 는 넘침 0 이라 두 요약줄이 스크롤 없이 보인다. calc(100% - 260px) 은 342px 까지
줄어 편집 영역이 너무 좁았다.

검증(브라우저 실측): 접힘/펼침 모두 코드 칸 506px 동일, 접힘 시 넘침 0, 펼치면 오른쪽
칸이 498px 스크롤, 오른쪽 칸을 200px 스크롤해도 색칠 층·줄 번호·textarea 정렬 유지,
페이지 가로 스크롤 없음, 편집 영역 25줄. 유닛테스트 61개 통과.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-14 17:10:17 +09:00
parent 469de15998
commit 8d93d09dac
5 changed files with 16 additions and 6 deletions
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/static/cafe24.css?v=20260814r" />
<link rel="stylesheet" href="/static/cafe24.css?v=20260814s" />
{% endblock %}
{% block content %}
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/static/cafe24.css?v=20260814r" />
<link rel="stylesheet" href="/static/cafe24.css?v=20260814s" />
{% endblock %}
{% block content %}
@@ -1,7 +1,7 @@
{% extends "erp_base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/static/cafe24.css?v=20260814r" />
<link rel="stylesheet" href="/static/cafe24.css?v=20260814s" />
{% endblock %}
{% block content %}
+9 -3
View File
@@ -217,11 +217,13 @@
flex: 0 0 auto;
}
/* 편집 폼과 코드 칸은 **줄어들지 않는다.** 아래 「예약 적용」·「버전 이력」을 펼치면
코드 칸이 눌리는 대신 내용이 아래로 밀리고 오른쪽 칸(.cf24-pane-editor)이 스크롤된다.
flex: 1 1 auto 였을 때는 펼칠 때마다 편집기가 작아져 작업하던 위치를 잃었다. */
.cf24-editor-form {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
flex: 0 0 auto;
gap: var(--sp-8, 8px);
}
@@ -276,7 +278,11 @@
스크롤 동기화 방식은 크기 계산이 아예 필요 없어 어긋날 여지가 없다. */
.cf24-code {
position: relative;
flex: 1 1 auto;
/* 화면 높이에 맞춰 크되(창 크기에 적응), 무엇을 펼쳐도 이 높이를 유지한다.
56vh 는 접힌 상태에서 「예약 적용」·「버전 이력」 요약줄까지 스크롤 없이
들어오는 값이다(실측: 62vh 는 51px 넘쳤고 56vh 는 0). */
flex: 0 0 auto;
height: 56vh;
min-height: 340px;
overflow: hidden;
border: 1px solid var(--color-subtle-ash, #e5e5e5);