[Bug]: Fluent V9 Carousel Control - Not Responsive on Mobile/Small Devices

[Rahul-Trimukhe]

Component

Carousel

Package version

^9.56.6

React version

^18.2.0

Environment

Description: I am experiencing an issue with the Fluent V9 Carousel Control where it is not responsive on mobile or small devices. The cards within the carousel are extending outside the container, causing layout issues.

Environment:

Fluent V9 version: [Specify the version]
Browser: [Specify the browser and version]
Device: [Specify the device]
Additional Context: I really like this new control and its features, but the lack of responsiveness on smaller devices is a significant issue. Any guidance or fixes would be greatly appreciated.

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fluentui/react-components": "^9.56.6",
    "@griffel/react": "^1.5.27",
    "@testing-library/react": "^16.1.0",
    "@types/react-beautiful-dnd": "^13.1.8",
    "axios": "^1.7.9",
    "dompurify": "^3.2.3",
    "he": "^1.2.0",
    "marked": "^15.0.4",
    "quill": "^2.0.3",
    "react": "^18.2.0",
    "react-beautiful-dnd": "^13.1.1",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.3.5",
    "react-helmet": "^6.1.0",
    "react-quill": "^2.0.0",
    "react-router-dom": "^7.0.2",
    "react-scripts": "5.0.1",
    "react-slick": "^0.30.3",
    "slick-carousel": "^1.8.1",
    "uuid": "^11.0.3",
    "web-vitals": "^4.2.4"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.6.3",
    "@types/dompurify": "^3.2.0",
    "@types/he": "^1.2.3",
    "@types/jest": "^29.5.14",
    "@types/lodash.debounce": "^4.0.9",
    "@types/react": "^18.3.16",
    "@types/react-dom": "^18.3.5",
    "@types/react-dropzone": "^5.1.0",
    "@types/react-helmet": "^6.1.11",
    "@types/react-slick": "^0.23.13",
    "typescript": "^4.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Current Behavior

The cards extend outside the container on mobile and small devices, disrupting the layout.

Expected Behavior

Expected Behavior: The carousel should be fully responsive, with the cards adjusting to fit within the container on all device sizes.

Reproduction

https://react.fluentui.dev/?path=/docs/components-carousel-carousel--docs#responsive

Steps to reproduce

Steps to Reproduce:

Implement the Fluent V9 Carousel Control using the provided code sample.
View the carousel on a mobile device or resize the browser window to a small width.
Observe that the cards extend outside the container.

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.