Thulasizwe/fix/3714

[czwe-01]

Required field asterisk spacing issue in designer mode #3714

Summary by CodeRabbit

• Style
  • Adjusted spacing for required field indicators in forms to improve visual alignment.

[coderabbitai]

Walkthrough

A new CSS adjacent-sibling selector for .sha-required-mark is added to the label style block, setting margin-bottom to -16px with !important flag. This CSS-only modification affects the layout positioning of required-mark elements adjacent to form labels.

Changes

Cohort / File(s)	Summary
Label Styling Updates shesha-reactjs/src/designer-components/_settings/styles/styles.ts	Adds adjacent-sibling selector for .sha-required-mark with margin-bottom: -16px !important, mirroring the existing .ant-form-item-tooltip rule to adjust required-mark layout positioning

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Single file, pure CSS styling addition
• No logic or control flow changes
• Straightforward adjacent-sibling selector pattern consistent with existing codebase

Possibly related PRs

• shesha-io/shesha-framework#3076 — Modifies the same label styles block in styles.ts, adjusting .ant-form-item-tooltip spacing
• shesha-io/shesha-framework#3102 — Updates the same styles.ts file with function signature and style selector changes
• shesha-io/shesha-framework#4021 — Also modifies label styles in styles.ts, reorganizing tooltip positioning and prior .sha-required-mark rules

Suggested reviewers

• James-Baloyi

Poem

🐰 A margin so neat, negative and true,
With !important flair, required marks debut!
Adjacent siblings dance in CSS delight,
Layout adjustments shine ever so bright! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
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.
Title Check	❓ Inconclusive	The PR title "Thulasizwe/fix/3714" is a branch name reference rather than a descriptive summary of the changes. While the PR description provides meaningful context ("Required field asterisk spacing issue in designer mode #3714"), the title itself uses only a developer name, a "fix" prefix, and an issue number without conveying what the actual change accomplishes. This fails to provide a teammate scanning the commit history with meaningful information about the primary change, which involves adjusting CSS styling for a required-mark element's spacing.	Consider renaming the PR title to something descriptive like "Fix required field asterisk spacing in designer mode" or "Adjust required-mark element margin in label styles." This would clearly communicate the nature of the fix to reviewers without requiring them to reference the issue description or code changes.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

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

🧹 Nitpick comments (1)

shesha-reactjs/src/designer-components/_settings/styles/styles.ts (1)

41-45: Verify that the negative margin doesn't cause visual overlapping issues.

The negative margin of -16px adjusts the spacing of the required field asterisk, but negative margins can sometimes cause elements to overlap unexpectedly. Please ensure this fix works correctly across:

• Different form field types
• Various screen sizes (mobile, tablet, desktop)
• Different designer mode states

Additionally, consider adding a brief comment explaining why this specific value (-16px) is needed for future maintainability.

Apply this diff to add a clarifying comment:

+            // Adjust required mark spacing to align properly in designer mode
             +.sha-required-mark {
             margin-bottom: -16px !important;
             }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dadaf14 and 9891c56.

📒 Files selected for processing (1)

• shesha-reactjs/src/designer-components/_settings/styles/styles.ts (1 hunks)

⏰ 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: build-attempt