fix: adjust form item margin styles in global and properties tabs

[czwe-01]

#3557
Fixed issue with margins applied through jsStyles were overidden in preview mode.

Summary by CodeRabbit

• Style
  • Adjusted form item margin styling to optimize spacing and alignment of form fields throughout the application, improving overall layout consistency.

[coderabbitai]

Walkthrough

The changes relocate a form-item margin reset from the main layout global styles to the properties tabs component styles. The margin reset (set to 0 !important) is removed from one file and added to another, effectively changing which component scope applies this styling rule to form items.

Changes

Cohort / File(s)	Summary
Main Layout Styles shesha-reactjs/src/components/mainLayout/styles/indexStyles.ts	Removed explicit margin: 0 !important; declaration for .${(p) => p.theme.prefixCls}-form-item, allowing default or inherited margins to apply.
Properties Tabs Styles shesha-reactjs/src/designer-components/propertiesTabs/style.ts	Added global style override setting .ant-form-item margin to 0 with !important within the component's content styles.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• Asterisk spacing issue #4136: Modifies the same properties tabs style file to adjust form-related spacing and marks.
• James/b/text #3593: Adjusts form-item margins in main layout styles and adds designer-component form-item overrides.
• Style: Asterisk spacing #4137: Changes form-related spacing in properties tabs with token-based styling for required marks.

Suggested reviewers

• James-Baloyi
• IvanIlyichev

Poem

🐰 A margin migrates from layout to tabs,
Form items align with CSS maps,
Zero declarations, important and neat,
Spacing shifts to keep rhythm complete!

🚥 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 PR title accurately describes the main change: adjusting form item margin styles across two files to fix margin override issues in preview mode.
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
• 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: 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 `@shesha-reactjs/src/designer-components/propertiesTabs/style.ts`:
- Around line 36-38: The global reset targeting `.ant-form-item` is too broad;
narrow it to only the JS-style preview wrapper by changing the selector to scope
under the preview root (e.g., target `.sha-js-label .ant-form-item` or the
`ConfigurableFormItem` root like `.ConfigurableFormItem .ant-form-item`) so only
preview rows lose the margin without affecting `SettingsFormItem` or other
Form.Item instances in the properties panel.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: ba767d58-f1a4-4238-83c5-178412ae25d0

📥 Commits

Reviewing files that changed from the base of the PR and between 4479a26 and 513448c.

📒 Files selected for processing (2)

• shesha-reactjs/src/components/mainLayout/styles/indexStyles.ts
• shesha-reactjs/src/designer-components/propertiesTabs/style.ts

💤 Files with no reviewable changes (1)

• shesha-reactjs/src/components/mainLayout/styles/indexStyles.ts

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Scope this margin reset to the js-style preview wrapper only.

Line 36 now matches every Ant Form.Item in the properties tabs. SettingsFormItem renders regular settings controls as plain Form.Items, so this removes the default vertical spacing for the whole panel, not just the preview rows this fix is targeting. Please narrow the selector to the preview-specific wrapper (.sha-js-label / the ConfigurableFormItem root) instead of all .ant-form-items.

Example of a safer scope

-    .ant-form-item {
-      margin: 0px !important;
-    }
+    .sha-js-label,
+    .sha-js-label .ant-form-item {
+      margin: 0 !important;
+    }

Based on learnings: "dimension and margin handling follows a wrapper-based pattern: the FormItem wrapper (ConfigurableFormItem) is responsible for applying dimensions, margins, and layout styles..."

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	.ant-form-item {
	margin: 0px !important;
	}
	.sha-js-label,
	.sha-js-label .ant-form-item {
	margin: 0 !important;
	}

🤖 Prompt for AI Agents

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

In `@shesha-reactjs/src/designer-components/propertiesTabs/style.ts` around lines
36 - 38, The global reset targeting `.ant-form-item` is too broad; narrow it to
only the JS-style preview wrapper by changing the selector to scope under the
preview root (e.g., target `.sha-js-label .ant-form-item` or the
`ConfigurableFormItem` root like `.ConfigurableFormItem .ant-form-item`) so only
preview rows lose the margin without affecting `SettingsFormItem` or other
Form.Item instances in the properties panel.