fix(shell): 모바일에서 grid 해제로 본문 풀폭 강제
특이도 조정만으론 부족. 모바일(≤900px)에서 .erp-app grid를 아예 display:block 으로 해제해 데스크탑 collapsed :has 규칙과의 칸 분배 충돌을 원천 제거. 사이드바는 fixed 오버레이(z-index 1000), 본문은 width:100%. body 높이/overflow도 모바일에선 auto로 풀어 콘텐츠 잘림 방지. CSS 캐시버스트 v20260615b. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -285,18 +285,23 @@ body.erp-app-body { background: var(--color-canvas-white); height: 100vh; overfl
|
|||||||
|
|
||||||
/* ── 반응형 ── */
|
/* ── 반응형 ── */
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
/* 데스크탑 접힘(:has collapsed) 규칙보다 특이도 맞춰 모바일에서 사이드바 칸 0 강제 */
|
/* 모바일: grid 자체 해제(데스크탑 collapsed :has 규칙과의 특이도 싸움 회피).
|
||||||
|
사이드바는 흐름 밖 떠있는 오버레이, 본문은 풀폭 block. */
|
||||||
|
body.erp-app-body { height: auto; overflow: auto; }
|
||||||
.erp-app,
|
.erp-app,
|
||||||
.erp-app:has(.erp-sidebar[data-collapsed="true"]) { grid-template-columns: 0 1fr; }
|
.erp-app:has(.erp-sidebar[data-collapsed="true"]) { display: block; }
|
||||||
.erp-sidebar {
|
.erp-sidebar {
|
||||||
position: fixed; left: 0; top: 0; height: 100vh;
|
position: fixed; left: 0; top: 0; height: 100vh; z-index: 1000;
|
||||||
width: var(--erp-sidebar-w);
|
width: var(--erp-sidebar-w);
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
transition: transform .2s ease;
|
transition: transform .2s ease;
|
||||||
box-shadow: 0 0 0 1px var(--color-subtle-ash);
|
box-shadow: 0 0 0 1px var(--color-subtle-ash);
|
||||||
}
|
}
|
||||||
|
/* 모바일선 데스크탑 접힘 무시 — 메뉴 열면 풀폭으로 */
|
||||||
|
.erp-sidebar[data-collapsed="true"] { width: var(--erp-sidebar-w); }
|
||||||
.erp-sidebar.is-open { transform: translateX(0); }
|
.erp-sidebar.is-open { transform: translateX(0); }
|
||||||
.erp-sidebar-mobile-toggle { display: inline-flex; }
|
.erp-sidebar-mobile-toggle { display: inline-flex; }
|
||||||
|
.erp-content { width: 100%; min-width: 0; }
|
||||||
.erp-form-grid { grid-template-columns: 1fr 1fr; }
|
.erp-form-grid { grid-template-columns: 1fr 1fr; }
|
||||||
.erp-field-wide { grid-column: span 2; }
|
.erp-field-wide { grid-column: span 2; }
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,8 +4,8 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title>{{ page_title or "ERP" }} — DBX Corporation</title>
|
<title>{{ page_title or "ERP" }} — DBX Corporation</title>
|
||||||
<link rel="stylesheet" href="/static/erp.css?v=20260615a" />
|
<link rel="stylesheet" href="/static/erp.css?v=20260615b" />
|
||||||
<link rel="stylesheet" href="/static/erp-shell.css?v=20260615a" />
|
<link rel="stylesheet" href="/static/erp-shell.css?v=20260615b" />
|
||||||
<link rel="stylesheet" href="/static/erp-attach-viewer.css" />
|
<link rel="stylesheet" href="/static/erp-attach-viewer.css" />
|
||||||
{% block head_extra %}{% endblock %}
|
{% block head_extra %}{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
Reference in New Issue
Block a user