From 180cc5b16351c1d50a0cfbfc128115194e4d07c1 Mon Sep 17 00:00:00 2001
From: Johngreen <ramses203@naver.com>
Date: Tue, 10 Feb 2026 13:28:44 +0900
Subject: [PATCH] fix(ui): improve template editor modal and card-body spacing

- Add gap to card-body for consistent field spacing
- Wrap modal content in modal-body-form with proper gap
- Use modal-lg for item add modal to prevent field overflow

Co-Authored-By: Claude Opus 4 <noreply@anthropic.com>
---
 dashboard/app/globals.css               | 10 ++++++++++
 dashboard/components/TemplateEditor.tsx |  4 +++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/dashboard/app/globals.css b/dashboard/app/globals.css
index ca42a0c..00db303 100644
--- a/dashboard/app/globals.css
+++ b/dashboard/app/globals.css
@@ -99,6 +99,9 @@ a {
 
 .card-body {
   padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .btn-outline {
@@ -979,6 +982,13 @@ a {
   padding-top: 8px;
 }
 
+.modal-body-form {
+  padding: 20px 24px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
 /* ===== Form Grid ===== */
 .form-grid {
   display: grid;
diff --git a/dashboard/components/TemplateEditor.tsx b/dashboard/components/TemplateEditor.tsx
index a2293a9..c013313 100644
--- a/dashboard/components/TemplateEditor.tsx
+++ b/dashboard/components/TemplateEditor.tsx
@@ -338,13 +338,14 @@ export function TemplateEditor({ tenantId, initialData, onSave, isEdit }: Props)
 
       {showAddItem && (
         <div className="modal-overlay" onClick={() => setShowAddItem(false)}>
-          <div className="modal-content" onClick={e => e.stopPropagation()}>
+          <div className="modal-content modal-lg" onClick={e => e.stopPropagation()}>
             <div className="modal-header">
               <h3>검사 항목 추가</h3>
               <button type="button" className="modal-close" onClick={() => setShowAddItem(false)}>
                 <span className="material-symbols-outlined">close</span>
               </button>
             </div>
+            <div className="modal-body-form">
             <div className="form-field">
               <label>항목명 *</label>
               <input
@@ -407,6 +408,7 @@ export function TemplateEditor({ tenantId, initialData, onSave, isEdit }: Props)
                 추가
               </button>
             </div>
+            </div>
           </div>
         </div>
       )}