fix(studio): prevent horizontal overflow in mobile layout

[Harsheetsharma]

Fixes #1292

Problem

On mobile devices, certain content (especially long strings like URLs) overflows horizontally, causing layout stretching and horizontal scrolling.

Root cause

Elements with font-mono (e.g., URLs / identifiers) were not wrapping properly and exceeded container width.

✅ Fix

• Applied wrapping rules to ensure long strings break within container bounds
• Prevented horizontal overflow without affecting layout structure

Before

After

Result

• No horizontal scrolling on mobile
• Content stays within viewport
• Improved readability of long strings

Scope

This PR focuses only on fixing horizontal overflow. Other layout issues (like sidebar overlap) are not addressed here.

[changeset-bot]

⚠️ No Changeset found

Latest commit: ec939cd

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

[netlify]

✅ Deploy Preview for modest-rosalind-098b67 ready!

Name	Link
🔨 Latest commit	ec939cd
🔍 Latest deploy log	https://app.netlify.com/projects/modest-rosalind-098b67/deploys/69bd248ccb24220008a8e394
😎 Deploy Preview	https://deploy-preview-1293--modest-rosalind-098b67.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for asyncapi-studio-design-system ready!

Name	Link
🔨 Latest commit	ec939cd
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-studio-design-system/deploys/69bd248c953eb100080edade
😎 Deploy Preview	https://deploy-preview-1293--asyncapi-studio-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud