From 6346e589ad92a92eda6d0f5c4fbb40af588f7045 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Fri, 22 Nov 2024 12:30:22 -0300
Subject: [PATCH] Fix media-modal-zoom

---
 src/features/ui/components/image-loader.tsx   |   4 +-
 .../ui/components/modals/media-modal.tsx      | 148 +++++++++---------
 src/styles/tailwind.css                       |   2 -
 3 files changed, 77 insertions(+), 77 deletions(-)

diff --git a/src/features/ui/components/image-loader.tsx b/src/features/ui/components/image-loader.tsx
index 5abd00dde..2635b106c 100644
--- a/src/features/ui/components/image-loader.tsx
+++ b/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 h-[80vh] 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',
             }}
diff --git a/src/features/ui/components/modals/media-modal.tsx b/src/features/ui/components/modals/media-modal.tsx
index 34793a776..69cbd1d19 100644
--- a/src/features/ui/components/modals/media-modal.tsx
+++ b/src/features/ui/components/modals/media-modal.tsx
@@ -258,97 +258,99 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
           }
           justifyContent='between'
         >
-          <HStack
-            alignItems='center'
-            justifyContent='between'
-            className={clsx('flex-[0_0_60px] p-4 transition-opacity', navigationHiddenClassName)}
-          >
-            <IconButton
-              title={intl.formatMessage(messages.close)}
-              src={xIcon}
-              onClick={onClose}
-              theme='dark'
-              className='!p-1.5 hover:scale-105 hover:bg-gray-900'
-              iconClassName='h-5 w-5'
-            />
-
-            <HStack alignItems='center' space={2}>
+          <Stack className='relative h-full'>
+            <HStack
+              alignItems='center'
+              justifyContent='between'
+              className={clsx('absolute z-[9999] flex w-full p-4 transition-opacity', navigationHiddenClassName)}
+            >
               <IconButton
-                src={downloadIcon}
+                title={intl.formatMessage(messages.close)}
+                src={xIcon}
+                onClick={onClose}
                 theme='dark'
                 className='!p-1.5 hover:scale-105 hover:bg-gray-900'
                 iconClassName='h-5 w-5'
-                onClick={handleDownload}
               />
 
-              {status && (
+              <HStack alignItems='center' space={2}>
                 <IconButton
-                  src={isFullScreen ? arrowsMinimizeIcon : arrowsMaximizeIcon}
-                  title={intl.formatMessage(isFullScreen ? messages.minimize : messages.expand)}
+                  src={downloadIcon}
                   theme='dark'
-                  className='hidden !p-1.5 hover:scale-105 hover:bg-gray-900 xl:block'
+                  className='!p-1.5 hover:scale-105 hover:bg-gray-900'
                   iconClassName='h-5 w-5'
-                  onClick={() => setIsFullScreen(!isFullScreen)}
+                  onClick={handleDownload}
                 />
-              )}
+
+                {status && (
+                  <IconButton
+                    src={isFullScreen ? arrowsMinimizeIcon : arrowsMaximizeIcon}
+                    title={intl.formatMessage(isFullScreen ? messages.minimize : messages.expand)}
+                    theme='dark'
+                    className='hidden !p-1.5 hover:scale-105 hover:bg-gray-900 xl:block'
+                    iconClassName='h-5 w-5'
+                    onClick={() => setIsFullScreen(!isFullScreen)}
+                  />
+                )}
+              </HStack>
             </HStack>
-          </HStack>
 
-          {/* Height based on height of top/bottom bars */}
-          <div
-            className='relative h-[calc(100vh-120px)] w-full grow'
-          >
-            {hasMultipleImages && (
-              <div className={clsx('absolute inset-y-0 left-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}>
-                <button
-                  tabIndex={0}
-                  className='flex size-10 items-center justify-center rounded-full bg-gray-900 text-white'
-                  onClick={handlePrevClick}
-                  aria-label={intl.formatMessage(messages.previous)}
+            {/* Height based on height of top/bottom bars */}
+            <div
+              className='relative h-[calc(100vh-120px)] w-full grow'
+            >
+              {hasMultipleImages && (
+                <div className={clsx('absolute inset-y-0 left-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}>
+                  <button
+                    tabIndex={0}
+                    className='flex size-10 items-center justify-center rounded-full bg-gray-900 text-white'
+                    onClick={handlePrevClick}
+                    aria-label={intl.formatMessage(messages.previous)}
+                  >
+                    <Icon src={arrowLeftIcon} className='size-5' />
+                  </button>
+                </div>
+              )}
+
+              <div className='size-full'>
+                <ReactSwipeableViews
+                  style={swipeableViewsStyle}
+                  containerStyle={containerStyle}
+                  onChangeIndex={handleSwipe}
+                  className='flex items-center justify-center'
+                  index={getIndex()}
                 >
-                  <Icon src={arrowLeftIcon} className='size-5' />
-                </button>
+                  {content}
+                </ReactSwipeableViews>
               </div>
-            )}
 
-            <div className='size-full'>
-              <ReactSwipeableViews
-                style={swipeableViewsStyle}
-                containerStyle={containerStyle}
-                onChangeIndex={handleSwipe}
-                className='flex items-center justify-center'
-                index={getIndex()}
-              >
-                {content}
-              </ReactSwipeableViews>
+              {hasMultipleImages && (
+                <div className={clsx('absolute inset-y-0 right-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}>
+                  <button
+                    tabIndex={0}
+                    className='flex size-10 items-center justify-center rounded-full bg-gray-900 text-white'
+                    onClick={handleNextClick}
+                    aria-label={intl.formatMessage(messages.next)}
+                  >
+                    <Icon src={arrowRightIcon} className='size-5' />
+                  </button>
+                </div>
+              )}
             </div>
 
-            {hasMultipleImages && (
-              <div className={clsx('absolute inset-y-0 right-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}>
-                <button
-                  tabIndex={0}
-                  className='flex size-10 items-center justify-center rounded-full bg-gray-900 text-white'
-                  onClick={handleNextClick}
-                  aria-label={intl.formatMessage(messages.next)}
-                >
-                  <Icon src={arrowRightIcon} className='size-5' />
-                </button>
-              </div>
+            {actualStatus && (
+              <HStack
+                justifyContent='center'
+                className={clsx('absolute bottom-0 flex w-full transition-opacity', navigationHiddenClassName)}
+              >
+                <StatusActionBar
+                  status={actualStatus}
+                  space='md'
+                  statusActionButtonTheme='inverse'
+                />
+              </HStack>
             )}
-          </div>
-
-          {actualStatus && (
-            <HStack
-              justifyContent='center'
-              className={clsx('flex-[0_0_60px] transition-opacity', navigationHiddenClassName)}
-            >
-              <StatusActionBar
-                status={actualStatus}
-                space='md'
-                statusActionButtonTheme='inverse'
-              />
-            </HStack>
-          )}
+          </Stack>
         </Stack>
 
         {actualStatus && (
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index e9e656a9b..c83ce2a4a 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -39,8 +39,6 @@
 @layer utilities {
   .media-modal * {
     img {
-      max-height: 80vh;
-      width: 100%;
       object-fit: contain;
     }