fix(editor): add spacing between items inside of tabs

[Alexander6060]

🎫 Resolve RM-17287

🎯 What does this PR do?

• Adds the standard Markdown spacing between consecutive components inside a Tab, preventing components such as embeds and callouts from sticking together.

🧪 QA tips

• Render consecutive components inside a <Tab> and confirm there is spacing between them.
• Confirm the same components outside <Tabs> retain their existing spacing.
• Switch between tabs and confirm their content still renders correctly.

📸 Screenshot or Loom

Before:

After:

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b35bd49f-af30-4aaf-9474-c130eb944bc8

📥 Commits

Reviewing files that changed from the base of the PR and between 0172db0 and 4ad174d.

📒 Files selected for processing (1)

• __tests__/browser/markdown.test.js

🔗 Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

• readmeio/ai (manual)
• readmeio/gitto (manual)
• readmeio/markdown (manual)
• readmeio/readme (manual)

🚧 Files skipped from review as they are similar to previous changes (1)

• tests/browser/markdown.test.js

---

Walkthrough

Updated .TabContent styles to add vertical spacing between adjacent child elements. The spacing uses the --markdown-spacing variable and falls back to 15px. Added browser coverage for the resulting computed margins.

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

__tests__/browser/markdown.test.js

Oops! Something went wrong! :(

ESLint: 8.57.1

Error: Error while loading rule '@vitest/unbound-method': You have used a rule which requires type information, but don't have parserOptions set to generate type information for this file. See https://tseslint.com/typed-linting for enabling linting with type information.
Parser: /node_modules/@typescript-eslint/parser/dist/index.js
Occurred while linting /tests/browser/markdown.test.js
at throwError (/node_modules/@typescript-eslint/utils/dist/eslint-utils/getParserServices.js:40:11)
at getParserServices (/node_modules/@typescript-eslint/utils/dist/eslint-utils/getParserServices.js:29:9)
at create (/node_modules/@typescript-eslint/eslint-plugin/dist/rules/unbound-method.js:138:55)
at Object.create (/node_modules/@typescript-eslint/utils/dist/eslint-utils/RuleCreator.js:39:20)
at create (/node_modules/@vitest/eslint-plugin/dist/index.cjs:6355:35)
at Object.create (/node_modules/@typescript-eslint/utils/dist/eslint-utils/RuleCreator.js:39:20)
at createRuleListeners (/node_modules/eslint/lib/linter/linter.js:895:21)
at /node_modules/eslint/lib/linter/linter.js:1066:110
at Array.forEach ()
at runRules (/node_modules/eslint/lib/linter/linter.js:1003:34)

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@components/Tabs/style.scss`:
- Around line 44-46: Reduce the specificity of the adjacent-sibling selector in
the Tabs stylesheet, preferably by wrapping the full selector in :where(...), so
component-owned margins such as markdown pre and blockquote spacing retain
precedence. Add a regression test covering adjacent components in TabContent
with their own margin-top values.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 80f366e6-d4ac-4182-a208-30a4d9f6b0c2

📥 Commits

Reviewing files that changed from the base of the PR and between feed88f and e20ed6e.

📒 Files selected for processing (1)

• components/Tabs/style.scss

🔗 Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

• readmeio/ai (manual)
• readmeio/gitto (manual)
• readmeio/markdown (manual)
• readmeio/readme (manual)

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@__tests__/browser/markdown.test.js`:
- Around line 74-99: Update the adjacent TabContent spacing test to define
--markdown-spacing as 20px and assert the changed marginBottom property on the
non-final pre or blockquote child, rather than only checking marginTop. Preserve
a separate assertion or test for the 15px fallback if that fallback remains part
of the contract.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 83095804-ae65-498a-8319-4174a11b2925

📥 Commits

Reviewing files that changed from the base of the PR and between e20ed6e and 0172db0.

📒 Files selected for processing (2)

• __tests__/browser/markdown.test.js
• components/Tabs/style.scss

🔗 Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

• readmeio/ai (manual)
• readmeio/gitto (manual)
• readmeio/markdown (manual)
• readmeio/readme (manual)

🚧 Files skipped from review as they are similar to previous changes (1)

• components/Tabs/style.scss

[eaglethrost]

Looks good!

[greptile-apps]

Confidence Score: 5/5

The PR appears safe to merge, with no concrete blocking or independently actionable non-blocking issue identified.

The selector narrowly applies spacing to non-final direct children of tab content, and the added browser test covers the intended custom-spacing and fallback behavior while ensuring child-owned top margins remain intact.

_{Reviews (1): Last reviewed commit: "Merge branch 'next' into alex3/rm-17287-..." | Re-trigger Greptile}