Adjusting media

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'
@@ -311,6 +311,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
               </div>
             )}
 
+            <div className='size-full'>
               <ReactSwipeableViews
                 style={swipeableViewsStyle}
                 containerStyle={containerStyle}
@@ -320,6 +321,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
               >
                 {content}
               </ReactSwipeableViews>
+            </div>
 
             {hasMultipleImages && (
               <div className={clsx('absolute inset-y-0 right-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}>

src/styles/tailwind.css

@@ -37,6 +37,17 @@
 }
 
 @layer utilities {
+  .media-modal * {
+    img {
+      max-height: 80vh;
+      width: 100%;
+      object-fit: contain;
+    }
+    
+    video {
+      @apply max-w-full max-h-[80%];
+    }
+  }
   .status {
     @apply min-h-[54px] cursor-default animate-fade opacity-100;
   }