fix(image-gallery): fix responsiveness

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.1.10
+
+- fix(image gallery): responsiveness fix for number of images to show
+
 ## 2.1.9
 
 - fix(vulnerability): set resolution for @babel/traverse CVE-2023-45133

DEPENDENCIES

@@ -1327,7 +1327,7 @@ npm/npmjs/@testing-library/react/14.0.0, MIT AND (MIT AND WTFPL), approved, #907
 npm/npmjs/@tootallnate/once/2.0.0, MIT, approved, clearlydefined
 npm/npmjs/@trysound/sax/0.2.0, ISC, approved, clearlydefined
 npm/npmjs/@types/aria-query/5.0.1, MIT, approved, #10958
-npm/npmjs/@types/autosuggest-highlight/3.2.0, MIT, approved, clearlydefined
+npm/npmjs/@types/autosuggest-highlight/3.2.0, MIT, approved, #11672
 npm/npmjs/@types/babel__core/7.20.1, MIT, approved, clearlydefined
 npm/npmjs/@types/babel__generator/7.6.4, MIT, approved, clearlydefined
 npm/npmjs/@types/babel__template/7.4.1, MIT, approved, clearlydefined
@@ -1375,7 +1375,7 @@ npm/npmjs/@types/qs/6.9.7, MIT, approved, clearlydefined
 npm/npmjs/@types/range-parser/1.2.4, MIT, approved, #10795
 npm/npmjs/@types/react-dom/18.2.6, MIT, approved, #8256
 npm/npmjs/@types/react-is/18.2.1, MIT, approved, #9131
-npm/npmjs/@types/react-slick/0.23.10, MIT, approved, clearlydefined
+npm/npmjs/@types/react-slick/0.23.10, MIT, approved, #11666
 npm/npmjs/@types/react-transition-group/4.4.6, MIT, approved, #8416
 npm/npmjs/@types/react/18.2.14, MIT, approved, #8234
 npm/npmjs/@types/resolve/1.20.2, MIT, approved, clearlydefined

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "2.1.9",
+  "version": "2.1.10",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",

src/components/basic/ImageGallery/index.tsx

@@ -23,6 +23,7 @@ import { Carousel } from '../Carousel'
 import { type ImageType } from './types'
 import ImageItemOverlay from './ImageItemOverlay'
 import { Image } from '../Image'
+import { useMediaQuery } from '@mui/material'
 
 export const ImageGallery = ({
   gallery,
@@ -37,12 +38,20 @@ export const ImageGallery = ({
 }) => {
   const [hovered, setHovered] = useState(false)
   const [hoveredImage, setHoveredImage] = useState<ImageType>()
+  const mobile = useMediaQuery('(max-width:480px)')
+  const tab = useMediaQuery('(max-width:1023px)')
 
   const hoverImageFn = (image: ImageType) => {
     setHovered(true)
     setHoveredImage(image)
   }
 
+  const getSlidesToShow = () => {
+    if (mobile) return 1
+    else if (tab) return 2
+    else return 3
+  }
+
   return (
     <>
       {hovered && hoveredImage != null && hoveredImage.url && (
@@ -62,7 +71,7 @@ export const ImageGallery = ({
         infinite
         itemHeight={maxHeight ?? 0}
         itemWidth={maxWidth ?? 266}
-        slidesToShow={3}
+        slidesToShow={getSlidesToShow()}
       >
         {gallery.map((image) => (
           <div