Skip to main content

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 StoryImportanceMockup / Technical NotesAcceptance 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 HaveModalFieldType.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).