@alfalab/core-components-gallery 7.1.10 → 7.2.0-alfasans

package/moderncssm/components/image-viewer/slide.js.map

@@ -1 +1 @@
-{"version":3,"file":"slide.js","sources":["../../../src/components/image-viewer/slide.tsx"],"sourcesContent":["import React, { type FC, type ReactNode, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage, type ImageMeta } from '../../types';\nimport { getImageAlt, isSmallImage, isVideo, TestIds } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { NoImagePaths } from './paths';\nimport { Video } from './video';\n\nimport styles from './index.module.css';\n\ntype SlideInnerProps = {\n    active: boolean;\n    broken: boolean;\n    loading: boolean;\n    children: ReactNode;\n    isVideoView?: boolean;\n};\n\nconst SlideInner: FC<SlideInnerProps> = ({ children, broken, loading, isVideoView }) => {\n    const content = broken ? (\n        <div className={styles.brokenImgWrapper}>\n            <div className={styles.brokenImgIcon}>\n                <svg\n                    xmlns='http://www.w3.org/2000/svg'\n                    width='80'\n                    height='80'\n                    viewBox='0 0 80 80'\n                    fill='none'\n                >\n                    <rect width='80' height='80' fill='none' />\n                    <path\n                        fillRule='evenodd'\n                        clipRule='evenodd'\n                        d={NoImagePaths.baseImage}\n                        fill='#89898A'\n                    />\n                    <path d={NoImagePaths.triangleImage} fill='#89898A' />\n                </svg>\n            </div>\n\n            <TypographyText view='primary-small' color='static-secondary-light'>\n                Не удалось загрузить {isVideoView ? 'видео' : 'изображение'}\n            </TypographyText>\n        </div>\n    ) : (\n        children\n    );\n\n    return (\n        <div className={cn(styles.slide, { [styles.slideLoading]: loading })}>\n            {broken ? <div className={styles.placeholder}>{content}</div> : content}\n            <Spinner className={styles.spinner} preset={48} visible={loading} />\n        </div>\n    );\n};\n\ntype SlideProps = {\n    isActive: boolean;\n    image: GalleryImage;\n    meta?: ImageMeta;\n    containerAspectRatio: number;\n    imageAspectRatio: number;\n    index: number;\n    containerHeight: number;\n    slideVisible: boolean;\n};\n\nexport const Slide: FC<SlideProps> = ({\n    isActive,\n    meta,\n    containerAspectRatio,\n    imageAspectRatio,\n    image,\n    index,\n    containerHeight,\n    slideVisible,\n}) => {\n    const { view } = useContext(GalleryContext);\n    const { handleLoad, handleLoadError } = useHandleImageViewer();\n\n    const broken = Boolean(meta?.broken);\n    const small = isSmallImage(meta);\n    const verticalImageFit = !small && containerAspectRatio > imageAspectRatio;\n    const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio;\n\n    if (isVideo(image.src)) {\n        return (\n            <SlideInner isVideoView={true} active={isActive} broken={broken} loading={!meta}>\n                <Video url={image.src} index={index} isActive={isActive} />\n            </SlideInner>\n        );\n    }\n\n    return (\n        <SlideInner active={isActive} broken={broken} loading={!meta}>\n            <img\n                src={image.src}\n                alt={getImageAlt(image, index)}\n                className={cn({\n                    [styles.smallImage]: small,\n                    [styles.image]: !small && meta,\n                    [styles.mobile]: view === 'mobile',\n                    [styles.verticalImageFit]: verticalImageFit,\n                    [styles.horizontalImageFit]: horizontalImageFit,\n                })}\n                onLoad={(event) => handleLoad(event, index)}\n                onError={() => handleLoadError(index)}\n                style={{\n                    maxHeight: `${containerHeight}px`,\n                }}\n                data-test-id={slideVisible ? TestIds.ACTIVE_IMAGE : undefined}\n            />\n        </SlideInner>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"slide.js","sources":["../../../src/components/image-viewer/slide.tsx"],"sourcesContent":["import React, { type FC, type ReactNode, useCallback, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage, type ImageMeta } from '../../types';\nimport { getImageAlt, isSmallImage, isVideo, TestIds } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { NoImagePaths } from './paths';\nimport { Video } from './video';\n\nimport styles from './index.module.css';\n\ntype SlideInnerProps = {\n    active: boolean;\n    broken: boolean;\n    loading: boolean;\n    children: ReactNode;\n    isVideoView?: boolean;\n};\n\nconst SlideInner: FC<SlideInnerProps> = ({ children, broken, loading, isVideoView }) => {\n    const content = broken ? (\n        <div className={styles.brokenImgWrapper}>\n            <div className={styles.brokenImgIcon}>\n                <svg\n                    xmlns='http://www.w3.org/2000/svg'\n                    width='80'\n                    height='80'\n                    viewBox='0 0 80 80'\n                    fill='none'\n                >\n                    <rect width='80' height='80' fill='none' />\n                    <path\n                        fillRule='evenodd'\n                        clipRule='evenodd'\n                        d={NoImagePaths.baseImage}\n                        fill='#89898A'\n                    />\n                    <path d={NoImagePaths.triangleImage} fill='#89898A' />\n                </svg>\n            </div>\n\n            <TypographyText view='primary-small' color='static-secondary-light'>\n                Не удалось загрузить {isVideoView ? 'видео' : 'изображение'}\n            </TypographyText>\n        </div>\n    ) : (\n        children\n    );\n\n    return (\n        <div className={cn(styles.slide, { [styles.slideLoading]: loading })}>\n            {broken ? <div className={styles.placeholder}>{content}</div> : content}\n            <Spinner className={styles.spinner} preset={48} visible={loading} />\n        </div>\n    );\n};\n\ntype SlideProps = {\n    isActive: boolean;\n    image: GalleryImage;\n    meta?: ImageMeta;\n    containerAspectRatio: number;\n    imageAspectRatio: number;\n    index: number;\n    containerHeight: number;\n    slideVisible: boolean;\n    fullScreen?: boolean;\n};\n\nexport const Slide: FC<SlideProps> = ({\n    isActive,\n    meta,\n    containerAspectRatio,\n    imageAspectRatio,\n    image,\n    index,\n    containerHeight,\n    slideVisible,\n    fullScreen,\n}) => {\n    const { view } = useContext(GalleryContext);\n    const { handleLoad, handleLoadError } = useHandleImageViewer();\n\n    const broken = Boolean(meta?.broken);\n    const small = isSmallImage(meta);\n    const verticalImageFit = !small && containerAspectRatio > imageAspectRatio;\n    const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio;\n\n    const handleImageRef = useCallback(\n        (node: HTMLImageElement | null) => {\n            if (node?.complete && node.naturalWidth > 0 && !meta) {\n                handleLoad(\n                    { currentTarget: node } as React.SyntheticEvent<HTMLImageElement>,\n                    index,\n                );\n            }\n        },\n        [handleLoad, index, meta],\n    );\n\n    if (isVideo(image.src)) {\n        return (\n            <SlideInner isVideoView={true} active={isActive} broken={broken} loading={!meta}>\n                <Video\n                    url={image.src}\n                    index={index}\n                    isActive={isActive}\n                    className={cn({ [styles.fullScreenMedia]: fullScreen })}\n                />\n            </SlideInner>\n        );\n    }\n\n    return (\n        <SlideInner active={isActive} broken={broken} loading={!meta}>\n            <img\n                ref={handleImageRef}\n                src={image.src}\n                alt={getImageAlt(image, index)}\n                className={cn({\n                    [styles.smallImage]: small,\n                    [styles.image]: !small && meta,\n                    [styles.mobile]: view === 'mobile',\n                    [styles.fullScreenMedia]: fullScreen,\n                    [styles.verticalImageFit]: verticalImageFit,\n                    [styles.horizontalImageFit]: horizontalImageFit,\n                })}\n                onLoad={(event) => handleLoad(event, index)}\n                onError={() => handleLoadError(index)}\n                style={fullScreen ? undefined : { maxHeight: `${containerHeight}px` }}\n                data-test-id={slideVisible ? TestIds.ACTIVE_IMAGE : undefined}\n            />\n        </SlideInner>\n    );\n};\n"],"names":[],"mappings":"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"}

package/moderncssm/components/image-viewer/video/index.module.css

@@ -2,15 +2,20 @@
 
 .videoWrapper {
     display: flex;
+    align-items: center;
     justify-content: center;
     height: 100%;
-    width: auto;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
     position: relative;
 }
 
 .video {
     max-width: 100%;
     max-height: 100%;
+    -o-object-fit: contain;
+       object-fit: contain;
     border-radius: var(--border-radius-24);
 }
 

package/moderncssm/index.module.css

@@ -11,6 +11,7 @@
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
+    height: 100dvh;
     width: 100%;
     background-color: var(--color-static-neutral-0-inverted);
     padding-top: var(--sat);
@@ -25,6 +26,7 @@
     flex-grow: 1;
     width: 100vw;
     height: 100vh;
+    height: 100dvh;
     background: transparent;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-gallery",
-    "version": "7.1.10",
+    "version": "7.2.0-alfasans",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -13,14 +13,14 @@
         "build": "rollup -c ../../tools/rollup/rollup.config.mjs --silent"
     },
     "dependencies": {
-        "@alfalab/core-components-base-modal": "^7.1.6",
-        "@alfalab/core-components-button": "^13.2.0",
-        "@alfalab/core-components-icon-button": "^8.0.8",
-        "@alfalab/core-components-icon-view": "^5.0.4",
-        "@alfalab/core-components-mq": "^6.0.5",
-        "@alfalab/core-components-spinner": "^6.0.5",
-        "@alfalab/core-components-tooltip": "^9.0.15",
-        "@alfalab/core-components-typography": "^6.0.8",
+        "@alfalab/core-components-base-modal": "7.1.7-alfasans",
+        "@alfalab/core-components-button": "13.2.1-alfasans",
+        "@alfalab/core-components-icon-button": "8.0.9-alfasans",
+        "@alfalab/core-components-icon-view": "5.0.4-alfasans",
+        "@alfalab/core-components-mq": "6.0.6-alfasans",
+        "@alfalab/core-components-spinner": "6.0.6-alfasans",
+        "@alfalab/core-components-tooltip": "9.0.16-alfasans",
+        "@alfalab/core-components-typography": "6.0.9-alfasans",
         "@alfalab/hooks": "^1.17.0",
         "@alfalab/icons-glyph": "^2.260.0",
         "classnames": "^2.5.1",
@@ -38,6 +38,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "15.1.0",
-    "varsVersion": "11.1.0"
+    "themesVersion": "15.2.0-alfasans",
+    "varsVersion": "11.1.0-alfasans"
 }

package/src/Component.tsx

@@ -133,14 +133,15 @@ export const Gallery: FC<GalleryProps> = ({
         slideTo(nextIndex);
     }, [images.length, loop, currentSlideIndex, slideTo]);
 
-    const setImageMeta = useCallback(
-        (meta: ImageMeta, index: number) => {
-            imagesMeta[index] = meta;
+    const setImageMeta = useCallback((meta: ImageMeta, index: number) => {
+        setImagesMeta((prevImagesMeta) => {
+            const nextImagesMeta = prevImagesMeta.slice();
 
-            setImagesMeta(imagesMeta.slice());
-        },
-        [imagesMeta],
-    );
+            nextImagesMeta[index] = meta;
+
+            return nextImagesMeta;
+        });
+    }, []);
 
     const handleBottomButtonClick = useCallback(
         (e: MouseEvent) => {

package/src/components/image-viewer/component.tsx

@@ -8,7 +8,7 @@ import { ChevronBackHeavyMIcon } from '@alfalab/icons-glyph/ChevronBackHeavyMIco
 import { ChevronForwardHeavyMIcon } from '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';
 
 import { GalleryContext } from '../../context';
-import { getImageAlt, getImageKey, isVideo, TestIds } from '../../utils';
+import { getImageKey, isVideo, TestIds } from '../../utils';
 
 import { useHandleImageViewer } from './hooks';
 import { Slide } from './slide';
@@ -128,49 +128,70 @@ export const ImageViewer: FC = () => {
                 </div>
             )}
 
-            {fullScreen && !isVideo(currentImage?.src) && (
-                <img
-                    src={currentImage?.src}
-                    alt={currentImage ? getImageAlt(currentImage, currentSlideIndex) : ''}
-                    className={styles.fullScreenImage}
-                />
+            {fullScreen && currentImage && !isVideo(currentImage.src) && (
+                <div className={styles.fullScreenFrame}>
+                    <Slide
+                        isActive={true}
+                        containerAspectRatio={swiperAspectRatio}
+                        image={currentImage}
+                        containerHeight={swiperHeight}
+                        meta={imagesMeta[currentSlideIndex]}
+                        index={currentSlideIndex}
+                        imageAspectRatio={
+                            (imagesMeta[currentSlideIndex]?.width || 1) /
+                            (imagesMeta[currentSlideIndex]?.height || 1)
+                        }
+                        slideVisible={false}
+                        fullScreen={true}
+                    />
+                </div>
             )}
 
-            <Swiper {...swiperProps}>
-                {images.map((image, index) => {
-                    const meta = imagesMeta[index];
-
-                    const imageWidth = meta?.width || 1;
-                    const imageHeight = meta?.height || 1;
-
-                    const imageAspectRatio = imageWidth / imageHeight;
-
-                    const slideVisible = index === currentSlideIndex;
-
-                    return (
-                        <SwiperSlide
-                            key={getImageKey(image, index)}
-                            style={{
-                                pointerEvents: slideVisible ? 'auto' : 'none',
-                                transitionProperty: 'opacity',
-                            }}
-                        >
-                            {({ isActive }) => (
-                                <Slide
-                                    isActive={isActive}
-                                    containerAspectRatio={swiperAspectRatio}
-                                    image={image}
-                                    containerHeight={swiperHeight}
-                                    meta={meta}
-                                    index={index}
-                                    imageAspectRatio={imageAspectRatio}
-                                    slideVisible={slideVisible}
-                                />
-                            )}
-                        </SwiperSlide>
-                    );
+            <div
+                className={cn(styles.swiperFrame, {
+                    [styles.mobile]: isMobile,
+                    [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),
+                    [styles.fullScreenFrame]: fullScreen,
+                    [styles.hiddenFrame]: fullScreen && !isVideo(currentImage?.src),
                 })}
-            </Swiper>
+            >
+                <Swiper {...swiperProps}>
+                    {images.map((image, index) => {
+                        const meta = imagesMeta[index];
+
+                        const imageWidth = meta?.width || 1;
+                        const imageHeight = meta?.height || 1;
+
+                        const imageAspectRatio = imageWidth / imageHeight;
+
+                        const slideVisible = index === currentSlideIndex;
+
+                        return (
+                            <SwiperSlide
+                                key={getImageKey(image, index)}
+                                style={{
+                                    pointerEvents: slideVisible ? 'auto' : 'none',
+                                    transitionProperty: 'opacity',
+                                }}
+                            >
+                                {({ isActive }) => (
+                                    <Slide
+                                        isActive={isActive}
+                                        containerAspectRatio={swiperAspectRatio}
+                                        image={image}
+                                        containerHeight={swiperHeight}
+                                        meta={meta}
+                                        index={index}
+                                        imageAspectRatio={imageAspectRatio}
+                                        slideVisible={slideVisible}
+                                        fullScreen={fullScreen && isVideo(image.src)}
+                                    />
+                                )}
+                            </SwiperSlide>
+                        );
+                    })}
+                </Swiper>
+            </div>
 
             {showControls && (
                 <div

package/src/components/image-viewer/index.module.css

@@ -4,6 +4,7 @@
     display: flex;
     flex-grow: 1;
     justify-content: center;
+    min-height: 0;
     background-color: var(--color-static-neutral-0-inverted);
 
     /* swiper/swiper.css; */
@@ -69,48 +70,82 @@
         z-index: -1000;
     }
 
-    .swiper {
+    .swiperFrame {
         display: flex;
         width: 100%;
         height: 100%;
+        min-height: 0;
 
         /* 168px - высота хэдера и футера */
         max-height: calc(100vh - 168px);
+        max-height: calc(100dvh - 168px);
         padding: var(--gap-32) var(--gap-16);
         box-sizing: border-box;
 
         &.mobile {
             max-height: calc(100vh - 210px);
+            max-height: calc(100dvh - 210px);
         }
 
         &.mobileVideo {
             max-height: 100vh;
+            max-height: 100dvh;
         }
     }
 
+    .fullScreenFrame {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        max-height: none;
+        min-height: 0;
+        padding: var(--gap-0);
+        box-sizing: border-box;
+        overflow: hidden;
+    }
+
+    .hiddenFrame {
+        flex: 0 0 0;
+        width: 0;
+        height: 0;
+        padding: var(--gap-0);
+        overflow: hidden;
+    }
+
+    .swiper {
+        width: 100%;
+        height: 100%;
+    }
+
+    .hidden {
+        display: none;
+    }
+
     .singleSlideContainer {
         display: flex;
         width: 100%;
         height: 100%;
+        min-height: 0;
 
         max-height: calc(100vh - 80px);
+        max-height: calc(100dvh - 80px);
         padding: var(--gap-32);
         box-sizing: border-box;
 
         &.mobile {
             max-height: calc(100vh - 174px);
+            max-height: calc(100dvh - 174px);
             padding: 0;
         }
 
         &.mobileVideo {
             max-height: 100vh;
+            max-height: 100dvh;
         }
     }
 
-    .hidden {
-        display: none;
-    }
-
     .slide {
         position: relative;
         display: flex;
@@ -131,8 +166,11 @@
     }
 
     .image {
-        width: 0;
-        height: 0;
+        width: auto;
+        height: auto;
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
         user-select: none;
         border-radius: var(--border-radius-8);
 
@@ -145,6 +183,9 @@
         position: relative;
         width: auto;
         height: auto;
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
         user-select: none;
     }
 
@@ -158,6 +199,15 @@
         height: auto;
     }
 
+    .fullScreenMedia {
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+        border-radius: var(--border-radius-0);
+    }
+
     .arrow {
         display: flex;
         flex-direction: column;
@@ -209,14 +259,9 @@
         margin-bottom: var(--gap-4);
     }
 
-    .fullScreenImage {
-        width: 100%;
-        height: auto;
-        background-color: var(--color-light-base-bg-primary);
-    }
-
     .fullScreenVideo {
-        width: calc(100% - 192px);
-        max-height: calc(100vh - 82px);
+        width: 100%;
+        height: 100%;
+        max-height: none;
     }
 }

package/src/components/image-viewer/single.tsx

@@ -2,7 +2,7 @@ import React, { type FC, useContext, useRef } from 'react';
 import cn from 'classnames';
 
 import { GalleryContext } from '../../context';
-import { getImageAlt, isVideo } from '../../utils';
+import { isVideo } from '../../utils';
 
 import { useHandleImageViewer } from './hooks';
 import { Slide } from './slide';
@@ -35,11 +35,19 @@ export const Single: FC = () => {
         /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
         <div className={styles.component} onClick={handleWrapperClick}>
             {fullScreen && !isVideo(currentImage?.src) ? (
-                <img
-                    src={currentImage?.src}
-                    alt={currentImage ? getImageAlt(currentImage, currentSlideIndex) : ''}
-                    className={styles.fullScreenImage}
-                />
+                <div className={styles.fullScreenFrame}>
+                    <Slide
+                        isActive={true}
+                        containerAspectRatio={wrapperAspectRatio}
+                        image={currentImage}
+                        containerHeight={wrapperRect?.height || 0}
+                        meta={currentImageMeta}
+                        index={currentSlideIndex}
+                        imageAspectRatio={imageAspectRatio}
+                        slideVisible={false}
+                        fullScreen={true}
+                    />
+                </div>
             ) : (
                 <div
                     className={cn(styles.singleSlideContainer, {

package/src/components/image-viewer/slide.tsx

@@ -1,4 +1,4 @@
-import React, { type FC, type ReactNode, useContext } from 'react';
+import React, { type FC, type ReactNode, useCallback, useContext } from 'react';
 import cn from 'classnames';
 
 import { Spinner } from '@alfalab/core-components-spinner';
@@ -69,6 +69,7 @@ type SlideProps = {
     index: number;
     containerHeight: number;
     slideVisible: boolean;
+    fullScreen?: boolean;
 };
 
 export const Slide: FC<SlideProps> = ({
@@ -80,6 +81,7 @@ export const Slide: FC<SlideProps> = ({
     index,
     containerHeight,
     slideVisible,
+    fullScreen,
 }) => {
     const { view } = useContext(GalleryContext);
     const { handleLoad, handleLoadError } = useHandleImageViewer();
@@ -89,10 +91,27 @@ export const Slide: FC<SlideProps> = ({
     const verticalImageFit = !small && containerAspectRatio > imageAspectRatio;
     const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio;
 
+    const handleImageRef = useCallback(
+        (node: HTMLImageElement | null) => {
+            if (node?.complete && node.naturalWidth > 0 && !meta) {
+                handleLoad(
+                    { currentTarget: node } as React.SyntheticEvent<HTMLImageElement>,
+                    index,
+                );
+            }
+        },
+        [handleLoad, index, meta],
+    );
+
     if (isVideo(image.src)) {
         return (
             <SlideInner isVideoView={true} active={isActive} broken={broken} loading={!meta}>
-                <Video url={image.src} index={index} isActive={isActive} />
+                <Video
+                    url={image.src}
+                    index={index}
+                    isActive={isActive}
+                    className={cn({ [styles.fullScreenMedia]: fullScreen })}
+                />
             </SlideInner>
         );
     }
@@ -100,20 +119,20 @@ export const Slide: FC<SlideProps> = ({
     return (
         <SlideInner active={isActive} broken={broken} loading={!meta}>
             <img
+                ref={handleImageRef}
                 src={image.src}
                 alt={getImageAlt(image, index)}
                 className={cn({
                     [styles.smallImage]: small,
                     [styles.image]: !small && meta,
                     [styles.mobile]: view === 'mobile',
+                    [styles.fullScreenMedia]: fullScreen,
                     [styles.verticalImageFit]: verticalImageFit,
                     [styles.horizontalImageFit]: horizontalImageFit,
                 })}
                 onLoad={(event) => handleLoad(event, index)}
                 onError={() => handleLoadError(index)}
-                style={{
-                    maxHeight: `${containerHeight}px`,
-                }}
+                style={fullScreen ? undefined : { maxHeight: `${containerHeight}px` }}
                 data-test-id={slideVisible ? TestIds.ACTIVE_IMAGE : undefined}
             />
         </SlideInner>

package/src/components/image-viewer/video/index.module.css

@@ -2,15 +2,19 @@
 
 .videoWrapper {
     display: flex;
+    align-items: center;
     justify-content: center;
     height: 100%;
-    width: auto;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
     position: relative;
 }
 
 .video {
     max-width: 100%;
     max-height: 100%;
+    object-fit: contain;
     border-radius: var(--border-radius-24);
 }
 

package/src/index.module.css

@@ -9,6 +9,7 @@
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
+    height: 100dvh;
     width: 100%;
     background-color: var(--color-static-neutral-0-inverted);
     padding-top: var(--sat);
@@ -23,6 +24,7 @@
     flex-grow: 1;
     width: 100vw;
     height: 100vh;
+    height: 100dvh;
     background: transparent;
 }