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]}
/>