WEB-411: Improve alignment of Debit and Credit Amount fields

[AnvayKharb]

On the Create Journal Entry page, the alignment of the Debit Amount and Credit Amount fields is inconsistent. These fields leave unnecessary empty space and are not aligned with the corresponding GL Entry fields, which affects the visual balance of the form.

This update adjusts only the alignment of these two fields so they fill the vacant space appropriately. No other UI elements or layout sections were changed.

What Was Improved

Aligned Debit Amount field next to “Affected GL Entry (Debit)” by removing the empty gap.

Aligned Credit Amount field next to “Affected GL Entry (Credit)” in the same way.

Ensured no other form layout, spacing, or styling was modified.

Related Issues and Discussion

Fixes: #WEB-411

Before:

After:

Summary by CodeRabbit

• Style

  • Made Debit and Credit amount fields more compact and better aligned for improved form layout and easier data entry.

• New Features

  • Added an explicit add-entry button for the first row in both Debit and Credit sections; remove-entry controls remain available on subsequent rows.

[coderabbitai[bot]]

[!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

Adjusted layout and controls in the journal-entry creation HTML: amount input containers changed from flex-43 to flex-24, and add/remove buttons updated so a plus-circle appears for the first entry (i === 0) while minus remains for others.

Changes

Cohort / File(s)	Summary
Journal Entry Form — layout & controls src/app/accounting/create-journal-entry/create-journal-entry.component.html	Changed Debit and Credit Amount field classes from flex-43 to flex-24. Updated entry action buttons: show a plus-circle button when i === 0 to add an entry; show minus for i !== 0 to remove entries.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UI as JournalEntryComponent (template)
    participant C as Component TS
    rect `#e8f0fe`
      Note right of UI: Render fields with `flex-24` and action buttons
    end
    User->>UI: Click plus (i===0)
    UI->>C: call addEntry()
    C-->>UI: update entries model
    UI-->>User: re-render list (new entry added)
    User->>UI: Click minus (i!==0)
    UI->>C: call removeEntry(index)
    C-->>UI: update entries model
    UI-->>User: re-render list (entry removed)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Areas needing attention:
  • Verify corresponding component methods (addEntry, removeEntry) exist and handle index/state correctly.
  • Check responsive layout to ensure flex-24 doesn't introduce wrapping or visual regressions across breakpoints.
  • Confirm ARIA/accessible labels for the new plus-circle button and that icons/buttons have proper click targets.

Suggested reviewers

• gkbishnoi07
• alberto-art3ch

Pre-merge checks and finishing touches

✅ 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 clearly and specifically describes the main change: improving alignment of Debit and Credit Amount fields, which matches the core objective of adjusting field positioning and spacing in the create-journal-entry component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

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

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1bc6f3ceb266209105e2635ba513c77f27190cae and cb57e85ac61c0a7ecd367ac9501ce8e3d9dfe5c8.

📒 Files selected for processing (1)

• src/app/accounting/create-journal-entry/create-journal-entry.component.html (4 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

src/app/**

⚙️ CodeRabbit configuration file

src/app/**: For Angular code: verify component separation, trackBy on *ngFor, strict type safety, and clean observable patterns.

Files:

• src/app/accounting/create-journal-entry/create-journal-entry.component.html

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Run Lint, Build and Deploy

🔇 Additional comments (2)

src/app/accounting/create-journal-entry/create-journal-entry.component.html (2)

52-52: Verify alignment changes achieve intended result; conflicting reviewer feedback raises concerns.

The CSS class changes from flex-43 to flex-24 (amount field) and from flex-fill to flex-24 (button container) represent a significant width reduction that fundamentally alters the layout proportions. However, the reviewer (gkbishnoi07) explicitly stated the change "doesn't look good" and appears to add more empty space rather than fix alignment issues.

Given this feedback contradicts your stated intent to remove unnecessary gaps, please verify:

1. The visual appearance matches the intended alignment improvement
2. Whether the width reduction from flex-43 to flex-24 (50% narrower) achieves better alignment or inadvertently creates the spacing issue the reviewer observed
3. Test on different viewport sizes (the template uses responsive-column breakpoints)

Also applies to: 61-61

---

65-73: AI summary conflicts with code changes shown.

The AI-generated summary states: "Added plus-circle button when i === 0 to add an entry in both debit and credit sections; minus button remains for i !== 0." However, these button logic blocks (lines 65–73 and 106–114) are not marked as changed (~) in the annotated code, implying they existed prior to this PR.

Please clarify whether the button logic is part of this PR's scope or if only the CSS class changes are intentional.

Also applies to: 106-114

---

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.}

[AnvayKharb]

heyy @gkbishnoi07 please consider

[AnvayKharb]

@steinwinde just updated my pr !

[AnvayKharb]

@steinwinde you can check now

[AnvayKharb]

@steinwinde @gkbishnoi07 please take a look

[gkbishnoi07]

@AnvayKharb please create or mention jira ticket related to this PRs

[AnvayKharb]

heyy @gkbishnoi07 my jira ticket number is web-411 as I've mentioned

[gkbishnoi07]

Please mention in Pr description! Where it mentioned??

[AnvayKharb]

Hey @gkbishnoi07 , that was my mistake — I hadn’t mentioned it earlier. I’ve now updated my PR description accordingly.

[gkbishnoi07]

@AnvayKharb this change doesn’t look good to me. What exactly did you modify? It seems like you’ve just added more empty space instead of fixing the issue.

[gkbishnoi07]

@AnvayKharb please update screenshot