WEB-222: Family Members in Create Client stepper preview page not rendered correctly.

[YousufFFFF]

Description

This PR fixes a layout regression introduced during the Angular 14 to 19 update. When creating a new client and adding family members, the preview page was rendering the family members section too far on the right instead of displaying it as a left-aligned list below the general information.

The fix changes the CSS class on the family members wrapper div from layout-row-wrap responsive-column flex-fill m-b-20 to layout-column flex-100 m-b-20. The layout-row-wrap class was causing the heading, divider, and accordion to be laid out as horizontal flex items in a row. The new layout-column class ensures the children stack vertically (column direction), and flex-100 ensures the section takes full width and is left-aligned.

No new dependencies are required for this change.

Related issues and discussion

#WEB-222

After Video:

Clients.-.Google.Chrome.2026-03-03.16-19-05.mp4

Checklist

Please make sure these boxes are checked before submitting your pull request - thanks!

• If you have multiple commits please combine them into one commit by squashing them.

• Read and understood the contribution guidelines at web-app/.github/CONTRIBUTING.md.

[coderabbitai]

Note

.coderabbit.yaml has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)

Validation error: Unrecognized key(s) in object: 'pre_merge_checks'

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Walkthrough

A single HTML template file was modified to update CSS classes on the Family Members container div. The layout classes were changed from a row-wrap responsive layout to a column layout, affecting visual presentation only.

Changes

Cohort / File(s)	Summary
Layout Styling src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html	Updated container div CSS classes in the Family Members section from layout-row-wrap responsive-column flex-fill to layout-column flex-100, changing layout behavior from row-wrap to column with adjusted flex properties.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested reviewers

• IOhacker
• alberto-art3ch

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the bug fix (Family Members rendering issue) and the specific location (Create Client stepper preview page), directly matching the core change in the HTML layout classes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[IOhacker]

LGTM