diff --git a/web/modals/threads/gallery/thread-settings-media-gallery.css b/web/modals/threads/gallery/thread-settings-media-gallery.css --- a/web/modals/threads/gallery/thread-settings-media-gallery.css +++ b/web/modals/threads/gallery/thread-settings-media-gallery.css @@ -3,9 +3,8 @@ flex-wrap: wrap; overflow-y: scroll; justify-content: flex-start; - max-height: 700px; - padding: 10px; - margin-top: 10px; + height: 80vh; + padding-top: 16px; } div.mediaContainer { @@ -22,3 +21,11 @@ object-fit: cover; cursor: pointer; } + +.noMedia { + margin-top: 16px; + color: var(--text-background-tertiary-default); + display: flex; + flex: 1; + justify-content: center; +} diff --git a/web/modals/threads/gallery/thread-settings-media-gallery.react.js b/web/modals/threads/gallery/thread-settings-media-gallery.react.js --- a/web/modals/threads/gallery/thread-settings-media-gallery.react.js +++ b/web/modals/threads/gallery/thread-settings-media-gallery.react.js @@ -120,6 +120,14 @@ ); } + if (filteredMediaInfos.length === 0) { + return ( +
+ No {tab === 'All' ? 'media' : tab.toLowerCase()} in this chat. +
+ ); + } + return filteredMediaInfos.map((media, i) => { let imageSource; if (media.type === 'photo') { @@ -197,8 +205,7 @@ const threadSettingsMediaGalleryModal = React.useMemo( () => ( - - {tabs} + {tabContent} ),