Web fixes (#517)

* Fix scroll behaviors on web

* Remove headers on web to avoid scroll overflow

* Fix follow button press in cards

src/view/com/post-thread/PostLikedBy.tsx

@@ -78,6 +78,8 @@ export const PostLikedBy = observer(function ({uri}: {uri: string}) {
         </View>
       )}
       extraData={view.isLoading}
+      // @ts-ignore our .web version only -prf
+      desktopFixedHeight
     />
   )
 })

src/view/com/post-thread/PostRepostedBy.tsx

@@ -89,6 +89,8 @@ export const PostRepostedBy = observer(function PostRepostedBy({
         </View>
       )}
       extraData={view.isLoading}
+      // @ts-ignore our .web version only -prf
+      desktopFixedHeight
     />
   )
 })

src/view/com/profile/ProfileFollowers.tsx

@@ -92,6 +92,8 @@ export const ProfileFollowers = observer(function ProfileFollowers({
         </View>
       )}
       extraData={view.isLoading}
+      // @ts-ignore our .web version only -prf
+      desktopFixedHeight
     />
   )
 })

src/view/com/profile/ProfileFollows.tsx

@@ -89,6 +89,8 @@ export const ProfileFollows = observer(function ProfileFollows({
         </View>
       )}
       extraData={view.isLoading}
+      // @ts-ignore our .web version only -prf
+      desktopFixedHeight
     />
   )
 })

src/view/com/util/forms/Button.tsx

@@ -1,15 +1,20 @@
 import React from 'react'
 import {
+  GestureResponderEvent,
   StyleProp,
   StyleSheet,
   TextStyle,
-  TouchableOpacity,
+  Pressable,
   ViewStyle,
 } from 'react-native'
 import {Text} from '../text/Text'
 import {useTheme} from 'lib/ThemeContext'
 import {choose} from 'lib/functions'
 
+type Event =
+  | React.MouseEvent<HTMLAnchorElement, MouseEvent>
+  | GestureResponderEvent
+
 export type ButtonType =
   | 'primary'
   | 'secondary'
@@ -114,10 +119,18 @@ export function Button({
       },
     },
   )
+  const onPressWrapped = React.useCallback(
+    (event: Event) => {
+      event.stopPropagation()
+      event.preventDefault()
+      onPress?.()
+    },
+    [onPress],
+  )
   return (
-    <TouchableOpacity
+    <Pressable
       style={[typeOuterStyle, styles.outer, style]}
-      onPress={onPress}
+      onPress={onPressWrapped}
       testID={testID}>
       {label ? (
         <Text type="button" style={[typeLabelStyle, labelStyle]}>
@@ -126,7 +139,7 @@ export function Button({
       ) : (
         children
       )}
-    </TouchableOpacity>
+    </Pressable>
   )
 }
 

src/view/screens/PostLikedBy.tsx

@@ -22,7 +22,7 @@ export const PostLikedByScreen = withAuthRequired(({route}: Props) => {
 
   return (
     <View>
-      <ViewHeader title="Liked by" showOnDesktop />
+      <ViewHeader title="Liked by" />
       <PostLikedByComponent uri={uri} />
     </View>
   )

src/view/screens/PostRepostedBy.tsx

@@ -22,7 +22,7 @@ export const PostRepostedByScreen = withAuthRequired(({route}: Props) => {
 
   return (
     <View>
-      <ViewHeader title="Reposted by" showOnDesktop />
+      <ViewHeader title="Reposted by" />
       <PostRepostedByComponent uri={uri} />
     </View>
   )

src/view/screens/ProfileFollowers.tsx

@@ -20,7 +20,7 @@ export const ProfileFollowersScreen = withAuthRequired(({route}: Props) => {
 
   return (
     <View>
-      <ViewHeader title="Followers" showOnDesktop />
+      <ViewHeader title="Followers" />
       <ProfileFollowersComponent name={name} />
     </View>
   )

src/view/screens/ProfileFollows.tsx

@@ -20,7 +20,7 @@ export const ProfileFollowsScreen = withAuthRequired(({route}: Props) => {
 
   return (
     <View>
-      <ViewHeader title="Following" showOnDesktop />
+      <ViewHeader title="Following" />
       <ProfileFollowsComponent name={name} />
     </View>
   )