Fix consecutive chips margins

[senithkay]

Purpose

Fix consecutive chips touch each other because of no margins were set for the chips

Partially addresses: wso2/product-ballerina-integrator#1986

Summary by CodeRabbit

• Style
  • Refined horizontal margins around chip decorations in the expression editor for improved visual spacing and consistency.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This pull request adds horizontal margin spacing to chip decorations in the ChipExpressionEditor component, adjusting the marginLeft and marginRight properties to 2px to improve visual spacing while preserving existing border styling and token logic.

Changes

Cohort / File(s)	Summary
Chip decoration spacing workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CodeUtils.ts	Added horizontal margins (marginRight and marginLeft: 2px) to chip DOM styling for improved visual spacing around chip elements

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Visual-only change with no impact on logic or rendering behavior
• Single file modification limited to CSS properties

Suggested reviewers

• hevayo
• gigara
• kanushka

Poem

🐰 A chip so fine needs breathing room,
Two pixels left, two pixels right,
The spacing blooms, dispels the gloom,
Clean margins make the UI bright!
Hopping through CodeUtils with glee, ✨

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The pull request description is incomplete. It only includes the 'Purpose' section, but is missing critical required sections like Goals, Approach, UI Component Development, Automation tests, Security checks, and Test environment.	Complete the pull request description by adding the missing required sections from the template, including Goals, Approach (with UI screenshots if applicable), UI Component Development checklist, Automation tests, Security checks, and Test environment details.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The pull request title clearly and concisely describes the main change: adding margins to fix consecutive chips touching each other, which aligns with the summary of changes and PR objectives.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 816940a and 84d2a3d.

📒 Files selected for processing (1)

• workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CodeUtils.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-11-24T22:16:28.380Z

Learnt from: dan-niles
Repo: wso2/vscode-extensions PR: 980
File: workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/RichTextTemplateEditor/RichTextTemplateEditor.tsx:384-412
Timestamp: 2025-11-24T22:16:28.380Z
Learning: In the RichTextTemplateEditor component (workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/RichTextTemplateEditor/RichTextTemplateEditor.tsx), token fetching on external `value` prop changes is intentionally disabled. Users cannot edit both the minimized and expanded editors simultaneously, so tokens only need to be generated based on user typing in the expanded editor view, not on external prop updates.

Applied to files:

• workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CodeUtils.ts

🧬 Code graph analysis (1)

workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CodeUtils.ts (1)

workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/styles.ts (1)

• colors (228-236)

🔇 Additional comments (1)

workspaces/ballerina/ballerina-side-panel/src/components/editors/MultiModeExpressionEditor/ChipExpressionEditor/CodeUtils.ts (1)

96-98: Fix correctly addresses horizontal spacing between chips.

The addition of marginRight: "2px" and marginLeft: "2px" successfully prevents consecutive chips from touching. The implementation solves the stated problem.

Consider using only one margin direction to reduce redundancy.

Both marginLeft and marginRight create 4px spacing between consecutive chips (2px + 2px). Conventionally, only one direction is needed—typically marginRight for left-to-right layouts. This reduces redundancy and standard spacing to 2px instead of 4px.

Verify vertical spacing for wrapped expressions.

The editor supports constrained height (e.g., maxHeight: "150px") with overflow: "auto", allowing long expressions to wrap to multiple lines. When chips appear on different lines due to text wrapping, you may need vertical margins (marginTop or marginBottom) to prevent touching between rows. Test with longer expressions to confirm whether vertical spacing is required.

---

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