FOUR-24616: The "Save and Finish" button when creating a process from a guide template is distorted

[eiresendez]

Issue & Reproduction Steps

This PR addresses a visual issue where the SAVE AND FINISH button inside dynamically rendered screens (created by the PLG team and rendered via the wizard-template package) appears distorted due to a fixed width (width: 170px) applied via custom CSS:

.custom-css-scope [selector="btn-bx1"] button {
  width: 170px;
}

The wizard-template repo defines this style explicitly, assuming a fixed-width button design. However, when certain fonts (e.g., Comic Sans) are used, the text width exceeds the fixed value, causing overflow or distorted layouts.

Reproduction Steps

1. Open a guided template with a screen that includes a submit button using the selector btn-bx1.
2. Change the font to Comic Sans (or any wide font).
3. Observe that the button gets cut off or misaligned due to the fixed width.

Solution

• Overrode the fixed width rule by injecting a style override from WizardTemplateDetails.vue.
• Used ::v-deep to apply the style deeply to buttons nested inside dynamically rendered child components, despite the scoped style context.
• Set width: auto !important to ensure the button naturally adapts to its content size and avoids distortion.

How to Test

1. Launch the guided template modal from the dashboard.
2. Select a template that includes a screen with the btn-bx1 button.
3. Confirm that the SAVE AND FINISH button:

• Adjusts its width to fit its text.
• Is no longer distorted, even with fonts like Comic Sans.

Related Tickets & Packages

• FOUR-24616

Code Review Checklist

• [x] I have pulled this code locally and tested it on my instance, along with any associated packages.
• [x] This code adheres to ProcessMaker Coding Guidelines.
• [x] This code includes a unit test or an E2E test that tests its functionality, or is covered by an existing test.
• [x] This solution fixes the bug reported in the original ticket.
• [x] This solution does not alter the expected output of a component in a way that would break existing Processes.
• [x] This solution does not implement any breaking changes that would invalidate documentation or cause existing Processes to fail.
• [x] This solution has been tested with enterprise packages that rely on its functionality and does not introduce bugs in those packages.
• [x] This code does not duplicate functionality that already exists in the framework or in ProcessMaker.
• [x] This ticket conforms to the PRD associated with this part of ProcessMaker.

[processmaker-sonarqube[bot]]

Quality Gate passed

Issues
0 New issues
0 Fixed issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
No data about Duplication

See analysis details on SonarQube