ui(cupang): 저장·취소 버튼을 공통 헤더 카드 하단에 고정 배치

품목 라인 수가 늘어도 좌측 헤더 카드 하단에 고정(우측 컬럼 높이와 무관)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-05-30 05:13:41 +09:00
parent b75fda5901
commit d4e823f1fa
2 changed files with 11 additions and 13 deletions
@@ -55,6 +55,15 @@
value="{{ shipment.outbound_summary if shipment else '' }}" /></label> value="{{ shipment.outbound_summary if shipment else '' }}" /></label>
<label class="erp-field cpg-full"><span>메모</span> <label class="erp-field cpg-full"><span>메모</span>
<textarea class="erp-input" name="memo" rows="2">{{ shipment.memo if shipment else '' }}</textarea></label> <textarea class="erp-input" name="memo" rows="2">{{ shipment.memo if shipment else '' }}</textarea></label>
<div class="erp-page-actions cpg-form-actions">
<button type="submit" class="erp-btn erp-btn-primary">저장</button>
{% if mode == 'edit' %}
<a class="erp-btn erp-btn-outline" href="/cupang/{{ shipment.id }}">취소</a>
{% else %}
<a class="erp-btn erp-btn-outline" href="/cupang/">취소</a>
{% endif %}
</div>
</div> </div>
<!-- ── 품목 라인 (오른쪽) ── --> <!-- ── 품목 라인 (오른쪽) ── -->
@@ -82,15 +91,6 @@
</div> </div>
</div><!-- /cpg-form-2col --> </div><!-- /cpg-form-2col -->
<div class="erp-page-actions cpg-form-actions">
<button type="submit" class="erp-btn erp-btn-primary">저장</button>
{% if mode == 'edit' %}
<a class="erp-btn erp-btn-outline" href="/cupang/{{ shipment.id }}">취소</a>
{% else %}
<a class="erp-btn erp-btn-outline" href="/cupang/">취소</a>
{% endif %}
</div>
</form> </form>
<!-- 검색 결과 드롭다운 (JS 가 위치 이동) --> <!-- 검색 결과 드롭다운 (JS 가 위치 이동) -->
+2 -4
View File
@@ -80,12 +80,10 @@
@media (max-width: 900px) { @media (max-width: 900px) {
.cpg-form-head, .cpg-form-lines { flex-basis: 100%; } .cpg-form-head, .cpg-form-lines { flex-basis: 100%; }
} }
/* 저장/취소 — 라인 수와 무관하게 하단 고정(스크롤해도 보임) */ /* 저장/취소 — 공통 헤더 카드 하단에 위치(우측 라인 수와 무관) */
.cpg-form-actions { .cpg-form-actions {
position: sticky; bottom: 0; z-index: 5;
margin-top: 16px; margin-top: 16px;
padding: 12px 4px; padding-top: 12px;
background: var(--color-canvas-white);
border-top: 1px solid var(--color-subtle-ash); border-top: 1px solid var(--color-subtle-ash);
} }
.cpg-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .cpg-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }