diff --git a/app/soapbox/features/ui/components/modals/media-modal.tsx b/app/soapbox/features/ui/components/modals/media-modal.tsx index 18c24a5da..1348e1e96 100644 --- a/app/soapbox/features/ui/components/modals/media-modal.tsx +++ b/app/soapbox/features/ui/components/modals/media-modal.tsx @@ -70,7 +70,7 @@ const MediaModal: React.FC = (props) => { const [next, setNext] = useState(); const [index, setIndex] = useState(null); const [navigationHidden, setNavigationHidden] = useState(false); - const [isFullScreen, setIsFullScreen] = useState(false); + const [isFullScreen, setIsFullScreen] = useState(!status); const hasMultipleImages = media.size > 1; @@ -219,12 +219,14 @@ const MediaModal: React.FC = (props) => { }; }, [index]); - if (!actualStatus && isLoaded) { - return ( - - ); - } else if (!actualStatus) { - return ; + if (status) { + if (!actualStatus && isLoaded) { + return ( + + ); + } else if (!actualStatus) { + return ; + } } return ( @@ -255,21 +257,22 @@ const MediaModal: React.FC = (props) => { - setIsFullScreen(!isFullScreen)} - /> + {status && ( + setIsFullScreen(!isFullScreen)} + /> + )} @@ -311,31 +314,35 @@ const MediaModal: React.FC = (props) => { )} - - - + {actualStatus && ( + + + + )} - + {actualStatus && ( + + )} ); diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss index daa7296ee..65d429a19 100644 --- a/app/styles/components/detailed-status.scss +++ b/app/styles/components/detailed-status.scss @@ -1,5 +1,5 @@ .thread { - @apply bg-white dark:bg-primary-900 sm:rounded-xl; + @apply bg-white dark:bg-primary-900; &__status { @apply relative pb-4;