Skip to content

WEB-925: Fix Generate Report button styling on savings export transactions page#3519

Merged
alberto-art3ch merged 1 commit intoopenMF:devfrom
shubhamkumar9199:fix/export-transactions-button-styling
Apr 17, 2026
Merged

WEB-925: Fix Generate Report button styling on savings export transactions page#3519
alberto-art3ch merged 1 commit intoopenMF:devfrom
shubhamkumar9199:fix/export-transactions-button-styling

Conversation

@shubhamkumar9199
Copy link
Copy Markdown
Contributor

@shubhamkumar9199 shubhamkumar9199 commented Apr 17, 2026

The "Generate Report" button on the Savings Export Transactions page had styling issues. The cogs icon was oversized due to missing size="sm", the button container used percentage-based CSS (max-height: 2%, padding: 1% 0 2% 6%) causing inconsistent sizing, and the date fields were unnecessarily narrow with flex-30. This update aligns the button and form layout with the same pattern used on Loan Export Transactions and Screen Reports pages.

WEB-925

Screenshot 2026-04-17 210333

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

Release Notes

  • Style
    • Refined date picker field layout (From/To dates) to better distribute available space in the export form
    • Updated action button container styling with improved spacing between Cancel and Generate buttons
    • Optimized Generate button icon sizing for improved visual consistency

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 17, 2026

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: 9cf83a98-b519-4b20-8d38-5bd2d984fcf7

📥 Commits

Reviewing files that changed from the base of the PR and between 9ae0353 and 146438f.

📒 Files selected for processing (2)
  • src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.html
  • src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.scss

Walkthrough

This pull request updates the export-transactions component's UI layout and styling. The date picker fields are resized from flex-30 to flex-fill, and the button container styling is changed from generate-button to button-row with adjusted spacing and padding. Minor markup and icon sizing adjustments are also included.

Changes

Cohort / File(s) Summary
Layout and Styling Updates
src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.html, src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.scss
Updated date picker flex layout from flex-30 to flex-fill, replaced button container classes from generate-button to button-row with adjusted spacing (gap-5px instead of gap-5percent). Removed generate-button SCSS rule and added button-row rule with padding: 1rem 0. Minor markup reformatting and Generate button icon sizing adjustment.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

  • IOhacker
  • adamsaghy
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: fixing the Generate Report button styling on the savings export transactions page, which is the primary focus of the changeset.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ 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

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

Copy link
Copy Markdown
Collaborator

@alberto-art3ch alberto-art3ch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@alberto-art3ch alberto-art3ch merged commit c8fdb28 into openMF:dev Apr 17, 2026
6 checks passed
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