diff --git a/src/view/com/composer/drafts/DraftsListDialog.tsx b/src/view/com/composer/drafts/DraftsListDialog.tsx index 7bacc1205e..f66d19571f 100644 --- a/src/view/com/composer/drafts/DraftsListDialog.tsx +++ b/src/view/com/composer/drafts/DraftsListDialog.tsx @@ -3,6 +3,7 @@ import {View} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {isNative} from '#/platform/detection' import { type DraftSummary, type StoredDraft, @@ -10,7 +11,7 @@ import { useDrafts, useLoadDraft, } from '#/state/drafts' -import {atoms as a, useTheme} from '#/alf' +import {atoms as a, useTheme, web} from '#/alf' import {Button, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' import {PageX_Stroke2_Corner0_Rounded_Large as PageXIcon} from '#/components/icons/PageX' @@ -66,24 +67,10 @@ export function DraftsListDialog({ [control, _], ) - const listHeader = useMemo(() => { - return ( - - - - Drafts - - - {/* Spacer between header and first item */} - - - ) - }, [backButton]) - const renderItem = useCallback( ({item}: {item: DraftSummary}) => { return ( - + , []) + const header = useMemo( + () => ( + + + Drafts + + + ), + [backButton], + ) const emptyComponent = useMemo(() => { if (isLoading) { @@ -116,15 +112,15 @@ export function DraftsListDialog({ return ( + {isNative && header} item.id} - ListHeaderComponent={listHeader} + ListHeaderComponent={web(header)} + stickyHeaderIndices={web([0])} ListEmptyComponent={emptyComponent} - ItemSeparatorComponent={itemSeparator} - stickyHeaderIndices={[0]} - style={[t.atoms.bg_contrast_50, a.px_0]} + style={[t.atoms.bg_contrast_50, a.px_0, web({minHeight: 500})]} webInnerContentContainerStyle={[a.py_0]} />