Skip to content

WEB-1107: Fix Charges table alignment in Loan Account Preview step - #3799

Open
Farah-Nahle-FOO wants to merge 1 commit into
openMF:devfrom
foodeveloper:WEB-1107-fix-loan-charges-table-alignment
Open

WEB-1107: Fix Charges table alignment in Loan Account Preview step#3799
Farah-Nahle-FOO wants to merge 1 commit into
openMF:devfrom
foodeveloper:WEB-1107-fix-loan-charges-table-alignment

Conversation

@Farah-Nahle-FOO

@Farah-Nahle-FOO Farah-Nahle-FOO commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

Description

The Charges table in the Loan Account Preview step was displaying header and data columns out of alignment, making it hard to tell which name, type, amount, collection timing, and date belonged to each charge.

The <table> element had a stray flex-fill class applied to it, forcing display: flex on the table itself. This broke the shared table layout algorithm that keeps column widths consistent across the header row and data rows, so each row ended up computing its own column widths independently and the cells no longer lined up under their headers.

Removed the flex-fill class from the table; full width is already handled by the existing table { width: 100%; } global style, so no other changes were needed.

Related issues and discussion

WEB-1107

Screenshots, if any

image

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.

Summary by CodeRabbit

  • Bug Fixes
    • Improved the layout of the loan account charges table for a more consistent display.

The Charges table header had a stray flex-fill class applied to the
<table> element, forcing display:flex on it. This broke the shared
table layout algorithm, causing each row to compute its own column
widths independently so header and data cells no longer lined up.
@Farah-Nahle-FOO
Farah-Nahle-FOO requested a review from a team August 5, 2026 08:17
@coderabbitai

coderabbitai Bot commented Aug 5, 2026

Copy link
Copy Markdown

Review Change Stack

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: "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

This change updates the loans account preview template. It removes the flex-fill CSS class from the charges table container. The table markup, columns, rows, and data source stay the same.

Changes

Loans preview layout adjustment

Layer / File(s) Summary
Charges table container class update
src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html
The charges table container no longer uses flex-fill. The existing material elevation, table structure, and rendering stay unchanged.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Suggested reviewers: alberto-art3ch

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly identifies the alignment fix for the Charges table in the Loan Account Preview step.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

Comment @coderabbitai help to get the list of available commands.

@IOhacker

IOhacker commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

@Farah-Nahle-FOO please rebase and let me know

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants