Supra: fix spacing example in small viewport

[louismaximepiton]

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related issues

Closes #1673.

Description

Adding the .supra where needed.

Motivation & Context

Solve a spacing issue in small viewports.

Types of change

• Bug fix (non-breaking which fixes an issue)

Live previews

• https://deploy-preview-1885--boosted.netlify.app/docs/components/orange-navbar#example

Checklist

Contribution

• I have read the contributing guidelines

Accessibility

• My change follows accessibility good practices; I have at least run axe

Design

• My change respects the design guidelines defined in Orange Design System
• My change is compatible with responsive display

Development

• My change follows the developer guide
• (NA) I have added JavaScript unit tests to cover my changes
• (NA) I have added SCSS unit tests to cover my changes

Documentation

• My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

• My change introduces changes to the migration guide
• (NA) My new component is added in Storybook
• (NA) My new component is compatible with RTL
• Manually run BrowserStack tests
• Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
• Code review
• Design review
• A11y review

After the merge

• Manually launch Percy tests

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	e82132c
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/6412c4f494880300086f2508
😎 Deploy Preview	https://deploy-preview-1885--boosted.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 site settings.

[julien-deramond]

Shouldn't it be modified as well in components/orange-navbar.md and examples/form/index.html?

[MewenLeHo]

Shouldn't it be modified as well in components/orange-navbar.md and examples/form/index.html?

examples/form/index.html is already using the .supra class so it should be ok.

Ok for the desktop version but yes indeed it needs it for the mobile version.

[louismaximepiton]

Couldn't spot any use case inside components/orange-navbar.md but might be fine as-is, good catch !

[julien-deramond]

Couldn't spot any use case inside components/orange-navbar.md but might be fine as-is, good catch !

Maybe here

Orange-Boosted-Bootstrap/site/content/docs/5.3/components/orange-navbar.md

Line 127 in ae6cfe9

<ul class="navbar-nav border-top border-1 border-dark d-flex flex-row d-lg-none">

[louismaximepiton]

Ah you're right sorry, I was checking the navbar using inspector, not reading the doc 😄

[MewenLeHo]

🚀

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication