UI Bug Fix: Expand CMS Popup Modal Width to Reduce Height

Last Updated: 16/07/2026
Type: UI Layout Fix — CMS Modal Dimension Adjustments
Screen: CMS Admin Panel — Service Create/Edit Modal (Spa Services) & all configuration modals
Severity: 🟠 Medium — UX polishing to optimize data entry layouts, preventing excessive vertical scrolling

Feedback Screenshot:

• Actual UI: The service edit modal is very narrow and vertically elongated, forcing a long scroll

---

1. Identified Spacing Issue

On the Service Edit/Create modal in the CMS:

• The popup modal container is set to a narrow width (approx. 600px).
• Because of this narrow width, form elements (such as the branch checklist, price input, duration, buffers, description, and status checkboxes) are forced to stack vertically in single or double columns.
• This creates an excessively tall modal (large height) that requires vertical scrolling to access fields like the "Save" (Lưu service) button at the bottom.

---

2. Redesign & Spacing Specifications

To optimize readability and form structure, the modal width must be increased, allowing fields to sit side-by-side in multi-column layouts, which reduces the overall height of the box.

2.1 Modal Dimension Target Specs

• Width: Increase the modal container width from 600px to 960px (standard Desktop Medium/Large modal width).
• Height: Remove explicit/restrictive height caps and let the content flow naturally across horizontal columns. Limit maximum height to 90vh with an inner scrollable body if needed.

---

2.2 Proportional Multi-Column Grid Redesign

By utilizing a grid system (e.g. 12-column Grid or Flexbox rows), we reorganize the inputs to span horizontally:

┌────────────────────────────────────────────────────────────────────────┐
│  Sửa service Spa                                                    X  │
├────────────────────────────────────────────────────────────────────────┤
│                                                                        │
│  Tên service (flex: 2)                   Nhóm dịch vụ (flex: 1)        │
│  [ Body Massage 90 phút            ]     [ Body Massage           ]    │
│                                                                        │
│  SKU (flex: 1)                           Danh mục (flex: 1)            │
│  [ GL-BODY-MASSAGE-90              ]     [ Massage              ▼ ]    │
│                                                                        │
│  Chi nhánh áp dụng (3-column grid check list)                         │
│  [ ] Gold Lotus Hưng [ ] Gold Lotus Thảo Điền [ ] Gold Oriental Spa 1  │
│  [ ] Gold Oriental 2 [ ] Gold Oriental 3      [ ] Gold Meat House      │
│                                                                        │
│  Giá trước thuế       Thời lượng      Buffer trước    Buffer sau       │
│  [ 495000         ]   [ 90        ]   [ 10        ]   [ 10        ]    │
│                                                                        │
│  Mô tả                                                                 │
│  [ Golden Lotus Body Massage 90 phút...                              ] │
│                                                                        │
│  Hình đại diện (Thumbnail)               Cần therapist / phòng / bật   │
│  [ 🖼️ Asset đã chọn               ]     [✅] Therapist [✅] Phòng [✅]   │
│                                                                        │
├────────────────────────────────────────────────────────────────────────┤
│                                                      [Huỷ] [Lưu service]│
└────────────────────────────────────────────────────────────────────────┘

---

3. Style Adjustments (CSS / SCSS)

3.1 Before (Tall & Narrow Layout)

// ❌ WRONG — Restrictive width causing vertical stacking
.cms-modal-dialog {
  max-width: 600px; // ❌ Too narrow
  
  .form-row {
    display: flex;
    flex-direction: column; // Stacks all fields vertically
    margin-bottom: 12px;
  }
  
  .branch-checklist {
    display: grid;
    grid-template-columns: repeat(2, 1fr); // ❌ 2-column checklist stretches vertically
  }
}

3.2 After (Wide & Balanced Layout)

// ✅ CORRECT — Wider modal with multi-column input groups
.cms-modal-dialog {
  width: 90%;
  max-width: 960px; // ✅ Wider desktop modal width
  margin: 30px auto;
  
  .modal-body {
    max-height: 80vh;
    overflow-y: auto; // Fallback inner scrollbar
    padding: 24px;
  }

  // Flexbox rows for horizontal field alignments
  .form-row-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr); // price, duration, buffers side-by-side
    gap: 16px;
    margin-bottom: 16px;
  }

  .form-row-grid-2 {
    display: grid;
    grid-template-columns: 2fr 1fr; // e.g. Name (2/3 width) and Group (1/3 width)
    gap: 16px;
    margin-bottom: 16px;
  }

  // Branch checklist distributed across 3 or 4 columns
  .branch-checklist {
    display: grid;
    grid-template-columns: repeat(3, 1fr); // ✅ 3 columns reduces vertical list size
    gap: 12px;
    padding: 12px;
    background-color: #F9F9F9;
    border-radius: 6px;
    margin-bottom: 16px;
  }
}

---

Technical Checklist

• Locate the Modal dialog component file for the Service Manager view (typically ServiceEditModal.tsx or similar).
• Update the modal wrapper component props (or CSS class) to set width: 960px or a wide config token.
• Re-layout the branch checklist to display in 3 columns (or 4 columns depending on viewport space).
• Group the numerical inputs (Giá trước thuế, Thời lượng, Buffer trước, Buffer sau) on a single horizontal row (grid-template-columns: repeat(4, 1fr)).
• Group the Name and Group selector inputs in a 2:1 grid ratio.
• Group the checkbox switches (Cần therapist, Cần phòng, Đang bật) on a single horizontal row.
• Verify scrolling: ensure that on smaller monitor resolutions, the modal fits the height constraints gracefully by utilizing max-height: 85vh and overflow-y: auto.