Fix padding on Create/Edit Customer Properties modal
Jira Story: TF-3513 · Task: TF-3478 (linked via "Work item split" — direction currently backwards, pending fix; see bucket README) · Epic: TF-3477
Overview
The Create/Edit Customer Property modal (qontak-customer-fe, Nuxt 3 + Mekari Pixel 3) must use
142px left/right padding per Figma across all three steps. Steps 2 (Details) and 3 (Setup)
already use 32px 142px; only Step 1 (Field Type) still uses a flat 32px, leaving it visually
inconsistent with the rest of the flow.
Grounded fix: features/customers/properties/views/components/ModalCreate/FormSteps/ModalFieldType.vue:158
— .container { padding: 32px; } → padding: 32px 142px;. Reference (already correct):
ModalFieldDetails.vue:328, ModalFieldSetup.vue:473.
Figma: Customization → Customer Properties.
Scope Changes
- Frontend — scoped local CSS change to one modal step component; no shared-component ripple.
8. User Stories + Acceptance Criteria
| User Story | Importance | Mockup / Technical Notes | Acceptance Criteria |
|---|---|---|---|
| [PROPMODAL-S01] — Consistent modal padding across all steps As a user creating or editing a Customer Property, I want the Field Type step to have the same padding as the Details and Setup steps, so that the modal looks visually consistent and matches the Figma spec. | Should Have | ModalFieldType.vue:158 .container padding fix; risk: none, effort: XS. | — Happy Path — • AC-1: Given the Create/Edit Customer Property modal is open on Step 1 (Field Type), when the step renders, then its left/right padding is 142px, matching Steps 2 and 3 and the Figma spec. • AC-2: Given the modal on any step, when rendered, then vertical padding stays 32px (unchanged). — Guard-rail — • NEG-1: Given other modals in the Customer Properties feature, when they render, then their padding is unaffected by this change (fix is scoped to ModalFieldType.vue only). |