Merge branch 'fix-media-modal' into 'main'

Fix media modal

Closes #1791

See merge request soapbox-pub/soapbox!3274

src/features/ui/components/image-loader.tsx

@@ -135,13 +135,13 @@ class ImageLoader extends PureComponent<IImageLoader> {
     const { alt, src, width, height, onClick } = this.props;
     const { loading } = this.state;
 
-    const className = 'relative size-full flex items-center justify-center flex-col';
+    const className = 'relative h-screen flex items-center justify-center flex-col';
 
     return (
       <div className={className}>
         {loading ? (
           <canvas
-            className={clsx('max-h-[80%] max-w-full object-contain', { 'hidden': !this.hasSize() })}
+            className={clsx('max-h-[100%] max-w-full object-contain', { 'hidden': !this.hasSize() })}
             style={{
               background: 'url(\'../assets/images/void.png\') repeat',
             }}

src/features/ui/components/modals/media-modal.tsx

@@ -243,7 +243,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
   };
 
   return (
-    <div className='pointer-events-auto fixed inset-0 z-[9999] h-full bg-gray-900/90'>
+    <div className='media-modal pointer-events-auto fixed inset-0 z-[9999] flex size-full bg-gray-900/90'>
       <div
         className='absolute inset-0'
         role='presentation'
@@ -258,10 +258,11 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
           }
           justifyContent='between'
         >
+          <Stack className='relative h-full'>
             <HStack
               alignItems='center'
               justifyContent='between'
-            className={clsx('flex-[0_0_60px] p-4 transition-opacity', navigationHiddenClassName)}
+              className={clsx('absolute z-[9999] flex w-full p-4 transition-opacity', navigationHiddenClassName)}
             >
               <IconButton
                 title={intl.formatMessage(messages.close)}
@@ -311,15 +312,17 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
                 </div>
               )}
 
+              <div className='size-full'>
                 <ReactSwipeableViews
                   style={swipeableViewsStyle}
                   containerStyle={containerStyle}
                   onChangeIndex={handleSwipe}
-              className='flex items-center justify-center '
+                  className='flex items-center justify-center'
                   index={getIndex()}
                 >
                   {content}
                 </ReactSwipeableViews>
+              </div>
 
               {hasMultipleImages && (
                 <div className={clsx('absolute inset-y-0 right-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}>
@@ -338,7 +341,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
             {actualStatus && (
               <HStack
                 justifyContent='center'
-              className={clsx('flex-[0_0_60px] transition-opacity', navigationHiddenClassName)}
+                className={clsx('absolute bottom-2 flex w-full transition-opacity', navigationHiddenClassName)}
               >
                 <StatusActionBar
                   status={actualStatus}
@@ -348,6 +351,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
               </HStack>
             )}
           </Stack>
+        </Stack>
 
         {actualStatus && (
           <div

src/features/ui/components/zoomable-image.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { PureComponent } from 'react';
 
 const MIN_SCALE = 1;
@@ -132,7 +133,7 @@ class ZoomableImage extends PureComponent<IZoomableImage> {
           role='presentation'
           ref={this.setImageRef}
           alt={alt}
-          className='size-auto max-h-[80%] max-w-full object-contain shadow-2xl'
+          className={clsx('size-auto max-h-[80%] max-w-full object-contain', { 'size-full max-h-full': scale !== 1 })}
           title={alt}
           src={src}
           style={{