fix(spacing): fix zero-value padding utility classes (DS-5389)

[KamilEmeleev]

Summary by CodeRabbit

• Bug Fixes
  • Corrected zero-value padding utilities so they now apply padding to the intended sides.
  • Prevented these utilities from incorrectly modifying top margins.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: dface880-2fd2-4313-866b-ac2ea402fd72

📥 Commits

Reviewing files that changed from the base of the PR and between b0d0108 and 5c78763.

📒 Files selected for processing (1)

• packages/components/src/components/layout/spacing/spacing.module.css

---

📝 Walkthrough

Walkthrough

The spacing module corrects four zero-value padding utilities. Each utility now sets its intended logical padding property instead of margin-block-start.

Changes

Spacing utility corrections

Layer / File(s)	Summary
Correct zero-value padding declarations packages/components/src/components/layout/spacing/spacing.module.css	.pbs_0, .pie_0, .pbe_0, and .pis_0 now set their corresponding zero padding properties.

Estimated code review effort: 1 (Trivial) | ~2 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the fix to the zero-value padding utility classes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/ds-5389

---

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

[github-actions]

Visit the preview URL for this PR (updated for commit 5c78763):

https://react-koobiq-next--prs-442-vs5s2rd9.web.app

_{(expires Sat, 08 Aug 2026 07:48:26 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: fc29847d4a9e5cb1adf458c76a9b681c76e2eeff}

[Copilot]

Pull request overview

This PR fixes the zero-value padding utility classes in the layout spacing CSS module so they apply padding to the correct logical sides instead of mistakenly affecting margins.

Changes:

• Update .pbs_0, .pie_0, .pbe_0, and .pis_0 to use the corresponding padding-* logical properties.
• Remove previously incorrect *_auto padding-side utilities that were setting margin-block-start.

Suppressed comments (3)

packages/components/src/components/layout/spacing/spacing.module.css:305

• SpacingGap includes auto and is used for pie in spacing.ts (s[pie_${pieVal}]), but pie_auto is no longer defined in this CSS module. If a consumer sets pie="auto" it will now silently do nothing. Align the TS API and CSS classes by either disallowing auto for padding props or reintroducing a safe pie_auto mapping.

/* Padding Inline End */
.pie_0 {
  padding-inline-end: 0;
}

packages/components/src/components/layout/spacing/spacing.module.css:362

• pbe padding props can still take auto via SpacingGap, but there is no longer a pbe_auto class in this CSS module. That makes pbe="auto" a runtime no-op (undefined CSS module key). Consider splitting margin/padding gap unions or remapping auto for padding.

/* Padding Block End */
.pbe_0 {
  padding-block-end: 0;
}

packages/components/src/components/layout/spacing/spacing.module.css:419

• pis padding props can still receive auto through SpacingGap, but pis_auto is no longer defined. If pis="auto" is passed, s[pis_${pisVal}] will resolve to undefined and apply no padding. Align allowed values between TS and CSS (separate padding union or remap auto).

/* Padding Inline Start */
.pis_0 {
  padding-inline-start: 0;
}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.