WEB-475: The data on the dispersion of savings accounts appears overlaping…

[EDSONZ-WASSWA]

…pping

Description

-Removed gap,position, padding left from transfer-container

• Removed flex-wrap: wrap from column containers to prevent horizontal bleeding.
• Removed gap in transfer section
• Enforced width: 100% on sections and grids to ensure a consistent vertical layout.
• This ensures that even in constrained environments, the data follows the intended vertical "dispersion" without overlapping horizontally.

Related issues and discussion

#{Issue Number}
https://mifosforge.jira.com/issues?filter=-1&selectedIssue=WEB-475

Screenshots, if any

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

• Style
  • Refined the account transfer details layout: sections and info grid now span the full width, spacing between transfer sections reduced for a tighter presentation, and container positioning simplified for a cleaner, more consistent appearance.

[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

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 25d9ed3e-0f0e-471f-944a-66f98923f915

📥 Commits

Reviewing files that changed from the base of the PR and between 2203178 and 0973d72.

📒 Files selected for processing (1)

• src/app/account-transfers/view-account-transfer/view-account-transfer.component.scss

---

Walkthrough

The component stylesheet enforces full width on .transfer-container, .transfer-section, and .info-grid, and removes prior spacing/positioning properties like gaps and padding-left while adding position: relative to .transfer-section.

Changes

Stylesheet Layout Adjustments

Layer / File(s)	Summary
Enforce full-width and remove spacing/positioning src/app/account-transfers/view-account-transfer/view-account-transfer.component.scss	.transfer-container now has width: 100% and no gap/position/padding-left; .transfer-section has width: 100% and position: relative (removed gap: 0.75rem); .info-grid has width: 100%.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• openMF/web-app#3037: Related CSS layout tweaks for account-related views and selectors.
• openMF/web-app#2940: Edits the same component stylesheet and selectors for transfer page layout adjustments.

Suggested reviewers

• IOhacker
• alberto-art3ch

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title references WEB-475 and mentions overlapping data issues with savings accounts, which directly relates to the stylesheet fixes for layout overlap problems in the account transfer view component.
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.

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

✨ 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@src/app/account-transfers/view-account-transfer/view-account-transfer.component.scss`:
- Around line 9-13: The .status-indicator is absolutely positioned but its
ancestor .transfer-container is not positioned, so add a positioning context by
setting .transfer-container to position: relative (preserving its existing
display/flex rules) so the .status-indicator aligns correctly relative to the
transfer card; update the .transfer-container rule (the selector named
transfer-container) to include position: relative.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 79e7c825-4d8e-4c54-bbe8-85c8d6b157d2

📥 Commits

Reviewing files that changed from the base of the PR and between 37615bd and 2203178.

📒 Files selected for processing (1)

• src/app/account-transfers/view-account-transfer/view-account-transfer.component.scss