Composer - Use sheet presentation on iOS (#4278)

* use sheet presentation + tweak spacing

* line up elements + add hitslop to cancel

* fixing spacing on replies

src/view/com/composer/Composer.tsx

@@ -54,7 +54,7 @@ import {useAgent, useSession} from '#/state/session'
 import {useComposerControls} from '#/state/shell/composer'
 import {useAnalytics} from 'lib/analytics/analytics'
 import * as apilib from 'lib/api/index'
-import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
+import {HITSLOP_10, MAX_GRAPHEME_LENGTH} from 'lib/constants'
 import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
@@ -165,9 +165,8 @@ export const ComposePost = observer(function ComposePost({
     () => ({
       paddingBottom:
         isAndroid || (isIOS && !isKeyboardVisible) ? insets.bottom : 0,
-      paddingTop: isMobile && isWeb ? 15 : insets.top,
     }),
-    [insets, isKeyboardVisible, isMobile],
+    [insets, isKeyboardVisible],
   )
 
   const hasScrolled = useSharedValue(0)
@@ -422,7 +421,8 @@ export const ComposePost = observer(function ComposePost({
               accessibilityLabel={_(msg`Cancel`)}
               accessibilityHint={_(
                 msg`Closes post composer and discards post draft`,
-              )}>
+              )}
+              hitSlop={HITSLOP_10}>
               <Text style={[pal.link, s.f18]}>
                 <Trans>Cancel</Trans>
               </Text>
@@ -622,10 +622,8 @@ const styles = StyleSheet.create({
   topbar: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginTop: -10,
-    paddingHorizontal: 4,
     marginHorizontal: 16,
-    height: 44,
+    height: 54,
     gap: 4,
     borderBottomWidth: StyleSheet.hairlineWidth,
   },
@@ -633,7 +631,6 @@ const styles = StyleSheet.create({
     paddingTop: 10,
     paddingBottom: 10,
     height: 50,
-    marginTop: 0,
   },
   postBtn: {
     borderRadius: 20,
@@ -676,7 +673,7 @@ const styles = StyleSheet.create({
   },
   textInputLayout: {
     flexDirection: 'row',
-    paddingTop: 16,
+    paddingTop: 4,
   },
   textInputLayoutMobile: {
     flex: 1,