diff --git a/fluxer_app/src/features/guild/components/modals/guild_tabs/GuildStickersTab.tsx b/fluxer_app/src/features/guild/components/modals/guild_tabs/GuildStickersTab.tsx index a63415405..f2173f6fd 100644 --- a/fluxer_app/src/features/guild/components/modals/guild_tabs/GuildStickersTab.tsx +++ b/fluxer_app/src/features/guild/components/modals/guild_tabs/GuildStickersTab.tsx @@ -16,10 +16,12 @@ import {getAcceptString, getAssetFormatErrorMessage} from '@app/features/express import {isSvgFile} from '@app/features/expressions/utils/ImageUploadFileUtils'; import {CloneAllowedToggle} from '@app/features/guild/components/modals/guild_tabs/CloneAllowedToggle'; import styles from '@app/features/guild/components/modals/guild_tabs/GuildStickersTab.module.css'; +import {resolveEnclosingScrollSurface} from '@app/features/guild/components/modals/guild_tabs/GuildStickersTabScrollSurface'; import {UploadDropZone} from '@app/features/guild/components/UploadDropZone'; import {UploadSlotInfo} from '@app/features/guild/components/UploadSlotInfo'; import Guilds from '@app/features/guild/state/Guilds'; import {OKAY_DESCRIPTOR, TRY_AGAIN_DESCRIPTOR} from '@app/features/i18n/utils/CommonMessageDescriptors'; +import {NearViewportSurfaceContext} from '@app/features/messaging/hooks/useNearViewport'; import {openFilePicker} from '@app/features/messaging/utils/FilePickerUtils'; import {formatFileSize} from '@app/features/messaging/utils/FileUtils'; import Permission from '@app/features/permissions/state/Permission'; @@ -42,7 +44,7 @@ import {clsx} from 'clsx'; import {matchSorter} from 'match-sorter'; import {observer} from 'mobx-react-lite'; import type React from 'react'; -import {useCallback, useEffect, useMemo, useState} from 'react'; +import {useCallback, useEffect, useMemo, useRef, useState} from 'react'; const SEARCH_STICKERS_DESCRIPTOR = msg({ message: 'Search stickers', @@ -92,6 +94,8 @@ const GuildStickersTab: React.FC<{guildId: string}> = observer(function GuildSti const [stickers, setStickers] = useState>([]); const [fetchStatus, setFetchStatus] = useState<'idle' | 'pending' | 'success' | 'error'>('idle'); const [searchQuery, setSearchQuery] = useState(''); + const gridRef = useRef(null); + const resolveGridScrollSurface = useCallback(() => resolveEnclosingScrollSurface(gridRef.current), []); const layoutState = EmojiStickerLayout; const viewMode = layoutState.getStickerViewMode(); const guild = Guilds.getGuild(guildId); @@ -309,21 +313,24 @@ const GuildStickersTab: React.FC<{guildId: string}> = observer(function GuildSti /> )} {fetchStatus === 'success' && filteredStickers.length > 0 && ( -
- {filteredStickers.map((sticker) => ( - - ))} -
+ +
+ {filteredStickers.map((sticker) => ( + + ))} +
+
)} {fetchStatus === 'error' && (