docs: fix prevent horizontal scroll in Note and Warning components on mobile

[2u841r]

Add min-w-0 and flex-1 to the content div in Note and Warning components to allow proper flex shrinking on mobile devices.

This prevents horizontal overflow when content is wider than the viewport.

closes #1254

Summary by CodeRabbit

• Style
  • Improved layout and overflow handling for Note and Warning components in documentation.

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

[changeset-bot]

⚠️ No Changeset found

Latest commit: 4407903

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

@2u841r is attempting to deploy a commit to the Ping Labs Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

This PR fixes horizontal scrolling on mobile devices by updating the flex layout in the Note and Warning MDX components. The inner wrapper's className changes from child-targeting margin utilities to a tighter flex configuration with explicit sizing constraints, enabling proper content shrinking on smaller screens.

Changes

Cohort / File(s)	Summary
MDX Component Styling docs/src/components/mdx.tsx	Updated Note and Warning component inner div classNames: replaced [&>:first-child]:mt-0 [&>:last-child]:mb-0 utility selectors with min-w-0 flex-1 to enable proper content shrinkage and prevent horizontal overflow on mobile viewports

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

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.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding Tailwind classes to prevent horizontal scroll in Note and Warning components on mobile.
Linked Issues check	✅ Passed	The PR adds min-w-0 and flex-1 classes to the content div in Note and Warning components as required by issue #1254 to prevent horizontal overflow on mobile.
Out of Scope Changes check	✅ Passed	All changes in docs/src/components/mdx.tsx are directly scoped to fixing the horizontal scroll issue in Note and Warning components.

✨ 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: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c245897 and 4407903.

📒 Files selected for processing (1)

• docs/src/components/mdx.tsx

🧰 Additional context used

🧠 Learnings (2)

📚 Learning: 2024-12-07T18:44:24.444Z

Learnt from: juliusmarminge
Repo: pingdotgg/uploadthing PR: 1090
File: docs/src/components/Code.tsx:135-137
Timestamp: 2024-12-07T18:44:24.444Z
Learning: In `docs/src/components/Code.tsx`, using type casts like `as any` is acceptable due to type mismatches between React 18 and 19. These casts will be addressed when the project upgrades to React 19.

Applied to files:

• docs/src/components/mdx.tsx

📚 Learning: 2024-09-26T21:08:04.720Z

Learnt from: veloii
Repo: pingdotgg/uploadthing PR: 947
File: packages/react/src/components/primitive/allowed-content.tsx:29-32
Timestamp: 2024-09-26T21:08:04.720Z
Learning: For slot components, sometimes it's preferred to manually specify `children` via props to avoid the appearance of nested elements when they aren't actually nested.

Applied to files:

• docs/src/components/mdx.tsx

⏰ 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). (8)

• GitHub Check: bundle-analyze-result
• GitHub Check: e2e-node (minimal-appdir)
• GitHub Check: e2e-node (minimal-pagedir)
• GitHub Check: e2e-node (backend-adapters)
• GitHub Check: lint
• GitHub Check: build
• GitHub Check: typecheck
• GitHub Check: build

🔇 Additional comments (2)

docs/src/components/mdx.tsx (2)

81-90: Correct use of min-w-0 and flex-1 to prevent flex overflow.

The addition of min-w-0 flex-1 to the inner wrapper properly enables the content to shrink below its natural width on mobile. The min-w-0 class overrides Tailwind's default min-width: auto on flex children, allowing proper shrinking; flex-1 ensures the wrapper grows to fill available space. This is the correct Tailwind pattern for preventing horizontal overflow in flex layouts.

Please verify the fix on mobile devices to confirm horizontal scrolling no longer occurs on Note components across the docs.

---

92-101: Consistent fix applied to Warning component.

The same min-w-0 flex-1 pattern correctly applied to the Warning component's inner wrapper. The symmetric flex layout (icon with flex-none, content wrapper with min-w-0 flex-1) ensures consistent behavior on mobile across both components.

Please verify the fix on mobile devices to confirm horizontal scrolling no longer occurs on Warning components across the docs.

---

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