From ac8b90e0934fd0616cfdee303f20669afd63660c Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 19 Nov 2024 18:06:45 -0300
Subject: [PATCH 01/11] Remove icon titles from action bar

---
 src/features/status/components/thread.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/features/status/components/thread.tsx b/src/features/status/components/thread.tsx
index 9d43b255b..3d307b1cd 100644
--- a/src/features/status/components/thread.tsx
+++ b/src/features/status/components/thread.tsx
@@ -390,7 +390,6 @@ const Thread = (props: IThread) => {
                 status={status}
                 expandable={false}
                 space='lg'
-                withLabels
               />
             </>
           ) : null}

From f67af96f74dbc9202661ab0fb40c31402224e30d Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 19 Nov 2024 18:33:20 -0300
Subject: [PATCH 02/11] Refactor: remove "withLabels" and "text" props to
 simplify component

---
 src/components/status-action-bar.tsx    |  8 --------
 src/components/status-action-button.tsx | 15 +++------------
 2 files changed, 3 insertions(+), 20 deletions(-)

diff --git a/src/components/status-action-bar.tsx b/src/components/status-action-bar.tsx
index 3878cd43d..c86b4783b 100644
--- a/src/components/status-action-bar.tsx
+++ b/src/components/status-action-bar.tsx
@@ -146,7 +146,6 @@ const messages = defineMessages({
 
 interface IStatusActionBar {
   status: Status;
-  withLabels?: boolean;
   expandable?: boolean;
   space?: 'sm' | 'md' | 'lg';
   statusActionButtonTheme?: 'default' | 'inverse';
@@ -155,7 +154,6 @@ interface IStatusActionBar {
 
 const StatusActionBar: React.FC<IStatusActionBar> = ({
   status,
-  withLabels = false,
   expandable = true,
   space = 'sm',
   statusActionButtonTheme = 'default',
@@ -740,7 +738,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       active={status.reblogged}
       onClick={handleReblogClick}
       count={reblogCount}
-      text={withLabels ? intl.formatMessage(messages.reblog) : undefined}
       theme={statusActionButtonTheme}
     />
   );
@@ -780,7 +777,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
             icon={messageCircleIcon}
             onClick={handleReplyClick}
             count={replyCount}
-            text={withLabels ? intl.formatMessage(messages.reply) : undefined}
             disabled={replyDisabled}
             theme={statusActionButtonTheme}
           />
@@ -808,7 +804,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
               active={Boolean(meEmojiName)}
               count={emojiReactCount}
               emoji={meEmojiReact}
-              text={withLabels ? meEmojiTitle : undefined}
               theme={statusActionButtonTheme}
             />
           </StatusReactionWrapper>
@@ -821,7 +816,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
             onClick={handleFavouriteClick}
             active={Boolean(meEmojiName)}
             count={favouriteCount}
-            text={withLabels ? meEmojiTitle : undefined}
             theme={statusActionButtonTheme}
           />
         )}
@@ -835,7 +829,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
             onClick={handleDislikeClick}
             active={status.disliked}
             count={status.dislikes_count}
-            text={withLabels ? intl.formatMessage(messages.disfavourite) : undefined}
             theme={statusActionButtonTheme}
           />
         )}
@@ -848,7 +841,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
             filled
             onClick={handleZapClick}
             active={status.zapped}
-            text={withLabels ? intl.formatMessage(messages.zap) : undefined}
             theme={statusActionButtonTheme}
             count={status?.zaps_amount ? status.zaps_amount / 1000 : 0}
           />
diff --git a/src/components/status-action-button.tsx b/src/components/status-action-button.tsx
index 2819adaa3..314889e90 100644
--- a/src/components/status-action-button.tsx
+++ b/src/components/status-action-button.tsx
@@ -36,12 +36,11 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonEleme
   color?: Color;
   filled?: boolean;
   emoji?: EmojiReaction;
-  text?: React.ReactNode;
   theme?: 'default' | 'inverse';
 }
 
 const StatusActionButton = forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {
-  const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, text, theme = 'default', ...filteredProps } = props;
+  const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, theme = 'default', ...filteredProps } = props;
 
   const renderIcon = () => {
     if (emoji) {
@@ -70,13 +69,7 @@ const StatusActionButton = forwardRef<HTMLButtonElement, IStatusActionButton>((p
   };
 
   const renderText = () => {
-    if (text) {
-      return (
-        <Text tag='span' theme='inherit' size='sm'>
-          {text}
-        </Text>
-      );
-    } else if (count) {
+    if (count) {
       return (
         <StatusActionCounter count={count} />
       );
@@ -88,7 +81,7 @@ const StatusActionButton = forwardRef<HTMLButtonElement, IStatusActionButton>((p
       ref={ref}
       type='button'
       className={clsx(
-        'flex items-center rounded-full p-1 rtl:space-x-reverse',
+        'flex items-center space-x-1 rounded-full p-1 rtl:space-x-reverse',
         'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0',
         {
           'text-gray-600 hover:text-gray-600 dark:hover:text-white bg-white dark:bg-transparent': theme === 'default',
@@ -97,8 +90,6 @@ const StatusActionButton = forwardRef<HTMLButtonElement, IStatusActionButton>((p
           'hover:text-gray-600 dark:hover:text-white': !filteredProps.disabled,
           'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && !emoji && color === COLORS.accent,
           'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && !emoji && color === COLORS.success,
-          'space-x-1': !text,
-          'space-x-2': text,
         },
         className,
       )}

From 5a98e68f9b423360306ed05ce0855fc8748fab04 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 20 Nov 2024 09:49:19 -0600
Subject: [PATCH 03/11] Enable custom profile fields on Ditto

---
 src/utils/features.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/utils/features.ts b/src/utils/features.ts
index ff7b202cf..4c68928c3 100644
--- a/src/utils/features.ts
+++ b/src/utils/features.ts
@@ -883,6 +883,7 @@ const getInstanceFeatures = (instance: InstanceV1 | InstanceV2) => {
       v.software === MASTODON,
       v.software === PLEROMA,
       v.software === TAKAHE && gte(v.version, '0.7.0'),
+      v.software === DITTO,
     ]),
 
     /**

From 8a09fba01e49bead5cdd2bd5fe4b52ecfcf8fd3e Mon Sep 17 00:00:00 2001
From: "P. Reis" <patrickpereirareal1@gmail.com>
Date: Wed, 20 Nov 2024 20:44:28 -0300
Subject: [PATCH 04/11] fix(AdminNostrRelays): refetchQueries after onSuccess,
 display toast success and error

---
 src/features/admin/nostr-relays.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/features/admin/nostr-relays.tsx b/src/features/admin/nostr-relays.tsx
index 7d90c1c49..98fc17d72 100644
--- a/src/features/admin/nostr-relays.tsx
+++ b/src/features/admin/nostr-relays.tsx
@@ -9,11 +9,14 @@ import Form from 'soapbox/components/ui/form.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import RelayEditor, { RelayData } from 'soapbox/features/nostr-relays/components/relay-editor.tsx';
 import { useApi } from 'soapbox/hooks/useApi.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import toast from 'soapbox/toast.tsx';
 
 import { useAdminNostrRelays } from './hooks/useAdminNostrRelays.ts';
 
 const messages = defineMessages({
   title: { id: 'column.admin.nostr_relays', defaultMessage: 'Relays' },
+  success: { id: 'generic.saved', defaultMessage: 'Saved' },
 });
 
 const AdminNostrRelays: React.FC = () => {
@@ -25,6 +28,13 @@ const AdminNostrRelays: React.FC = () => {
 
   const mutation = useMutation({
     mutationFn: async () => api.put('/api/v1/admin/ditto/relays', relays),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ['NostrRelay'] });
+      toast.success(messages.success);
+    },
+    onError: (data) => {
+      toast.error(data.message); // `data.message` is a generic error message, not the `error` message returned from the backend
+    },
   });
 
   const handleSubmit = () => {

From 97b5dea61dad14580de8a16ebc5a116682532bdb Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 20 Nov 2024 20:56:43 -0300
Subject: [PATCH 05/11] Adjusting media

---
 .../ui/components/modals/media-modal.tsx      | 22 ++++++++++---------
 src/styles/tailwind.css                       | 11 ++++++++++
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/features/ui/components/modals/media-modal.tsx b/src/features/ui/components/modals/media-modal.tsx
index 75dd41218..24e8e4878 100644
--- a/src/features/ui/components/modals/media-modal.tsx
+++ b/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,15 +311,17 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
               </div>
             )}
 
-            <ReactSwipeableViews
-              style={swipeableViewsStyle}
-              containerStyle={containerStyle}
-              onChangeIndex={handleSwipe}
-              className='flex items-center justify-center '
-              index={getIndex()}
-            >
-              {content}
-            </ReactSwipeableViews>
+            <div className='size-full'>
+              <ReactSwipeableViews
+                style={swipeableViewsStyle}
+                containerStyle={containerStyle}
+                onChangeIndex={handleSwipe}
+                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)}>
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 5981ddc9e..65bc654ed 100644
--- a/src/styles/tailwind.css
+++ b/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;
   }

From 3ed840158c0004ec41562829271a354c327ca667 Mon Sep 17 00:00:00 2001
From: Hosted Weblate <hosted@weblate.org>
Date: Fri, 15 Nov 2024 22:12:47 +0100
Subject: [PATCH 06/11] Update translation files

Updated by "Cleanup translation files" hook in Weblate.

Translation: Soapbox/Soapbox
Translate-URL: https://hosted.weblate.org/projects/soapbox-pub/soapbox/
---
 src/locales/pt-BR.json | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/locales/pt-BR.json b/src/locales/pt-BR.json
index 64fe0a97f..374d24ebe 100644
--- a/src/locales/pt-BR.json
+++ b/src/locales/pt-BR.json
@@ -1217,17 +1217,16 @@
   "onboarding.avatar.title": "Escolha uma foto de perfil",
   "onboarding.bio.hint": "Máx 500 caracteres",
   "onboarding.bio.placeholder": "Conte um pouco sobre você…",
+  "onboarding.display_identity.fields.reason_placeholder": "Por que você quer fazer parte da comunidade {siteTitle}?",
+  "onboarding.display_identity.help_text": "Este identificador é um nome de usuário único que representa você na plataforma. Ele é gerado automaticamente com base no site, garantindo que você tenha uma identidade distinta para interagir com outros usuários. Este nome de usuário pode ser usado para personalizar sua experiência e facilitar a comunicação dentro da comunidade.",
+  "onboarding.display_identity.label": "Identidade",
+  "onboarding.display_identity.request": "Nome de usúario solicitado",
+  "onboarding.display_identity.subtitle": "Mostre quem você é! Crie um nome de usuário único e deixe sua marca.",
+  "onboarding.display_identity.title": "Escolha uma Identidade",
   "onboarding.display_name.label": "Nome de exibição",
   "onboarding.display_name.placeholder": "Ex. João Silva",
   "onboarding.display_name.subtitle": "Você pode sempre editar isso depois.",
   "onboarding.display_name.title": "Escolha um nome de exibição",
-  "onboarding.display_identity.title": "Escolha uma Identidade",
-  "onboarding.display_identity.label": "Identidade",
-  "onboarding.display_identity.request": "Nome de usúario solicitado",
-  "onboarding.display_identity.subtitle": "Mostre quem você é! Crie um nome de usuário único e deixe sua marca.",
-  "onboarding.display_identity.help_text": "Este identificador é um nome de usuário único que representa você na plataforma. Ele é gerado automaticamente com base no site, garantindo que você tenha uma identidade distinta para interagir com outros usuários. Este nome de usuário pode ser usado para personalizar sua experiência e facilitar a comunicação dentro da comunidade.",
-  "onboarding.display_identity.fields.nip05_label": "Nome de usuário",
-  "onboarding.display_identity.fields.reason_placeholder": "Por que você quer fazer parte da comunidade {siteTitle}?",
   "onboarding.done": "Concluído",
   "onboarding.error": "Ocorreu um erro inesperado. Por favor, tente novamente ou pule esta etapa.",
   "onboarding.finished.message": "Estamos muito empolgados para te receber em nossa comunidade! Toque no botão abaixo para começar.",

From 2251dd9f157f1c6f5e57f07ad3f3a5fa3b2833bd Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Thu, 21 Nov 2024 17:52:01 -0300
Subject: [PATCH 07/11] Fix media-modal

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

diff --git a/src/features/ui/components/image-loader.tsx b/src/features/ui/components/image-loader.tsx
index 7eab09c80..5abd00dde 100644
--- a/src/features/ui/components/image-loader.tsx
+++ b/src/features/ui/components/image-loader.tsx
@@ -135,7 +135,7 @@ 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-[80vh] flex items-center justify-center flex-col';
 
     return (
       <div className={className}>
diff --git a/src/features/ui/components/modals/media-modal.tsx b/src/features/ui/components/modals/media-modal.tsx
index 24e8e4878..34793a776 100644
--- a/src/features/ui/components/modals/media-modal.tsx
+++ b/src/features/ui/components/modals/media-modal.tsx
@@ -316,7 +316,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
                 style={swipeableViewsStyle}
                 containerStyle={containerStyle}
                 onChangeIndex={handleSwipe}
-                className='flex items-center justify-center '
+                className='flex items-center justify-center'
                 index={getIndex()}
               >
                 {content}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 65bc654ed..e9e656a9b 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -48,6 +48,7 @@
       @apply max-w-full max-h-[80%];
     }
   }
+
   .status {
     @apply min-h-[54px] cursor-default animate-fade opacity-100;
   }

From 6541baab187eb9165fafe4ff007382fcfd65236c Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Fri, 22 Nov 2024 12:30:22 -0300
Subject: [PATCH 08/11] 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;
     }
     

From 7b88c4696c2e77d40140d142a8613efc29554d9e Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Fri, 22 Nov 2024 17:41:36 -0300
Subject: [PATCH 09/11] Upgrade zoom

---
 src/features/ui/components/zoomable-image.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/features/ui/components/zoomable-image.tsx b/src/features/ui/components/zoomable-image.tsx
index 43e4f2740..7260b61bb 100644
--- a/src/features/ui/components/zoomable-image.tsx
+++ b/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={{

From 440aa8b928be0b2d5a8def5ba72ed3dca771dbbf Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Fri, 22 Nov 2024 17:42:11 -0300
Subject: [PATCH 10/11] Update bottom of action-buttons

---
 src/features/ui/components/modals/media-modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/ui/components/modals/media-modal.tsx b/src/features/ui/components/modals/media-modal.tsx
index 69cbd1d19..c9f615f71 100644
--- a/src/features/ui/components/modals/media-modal.tsx
+++ b/src/features/ui/components/modals/media-modal.tsx
@@ -341,7 +341,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
             {actualStatus && (
               <HStack
                 justifyContent='center'
-                className={clsx('absolute bottom-0 flex w-full transition-opacity', navigationHiddenClassName)}
+                className={clsx('absolute bottom-2 flex w-full transition-opacity', navigationHiddenClassName)}
               >
                 <StatusActionBar
                   status={actualStatus}

From c604bcb0d88ed8719fcd4d1370ff1a9683027f6d Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 25 Nov 2024 12:37:06 -0300
Subject: [PATCH 11/11] Remove unnecessary styles

---
 src/styles/tailwind.css | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index c83ce2a4a..5981ddc9e 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -37,16 +37,6 @@
 }
 
 @layer utilities {
-  .media-modal * {
-    img {
-      object-fit: contain;
-    }
-    
-    video {
-      @apply max-w-full max-h-[80%];
-    }
-  }
-
   .status {
     @apply min-h-[54px] cursor-default animate-fade opacity-100;
   }