Fixed #451

More properly adjusted flexbox layout

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tooot",
-  "version": "4.5.1",
+  "version": "4.6.0",
   "description": "tooot for Mastodon",
   "author": "xmflsct <me@xmflsct.com>",
   "license": "GPL-3.0-or-later",

src/components/Timeline/Shared/HeaderDefault.android.tsx

@@ -81,15 +81,10 @@ const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
       {queryKey ? (
         <Pressable
           accessibilityHint={t('accessibilityHint')}
-          style={{
+          style={{ flex: 1, flexBasis: StyleConstants.Font.Size.L }}
-            flex: 1,
-            flexDirection: 'row',
-            justifyContent: 'center',
-            marginBottom: StyleConstants.Spacing.L
-          }}
-          hitSlop={StyleConstants.Font.Size.M}
         >
           <ContextMenu
+            style={{ flex: 1, alignItems: 'center' }}
             dropdownMenuMode
             actions={actions}
             onPress={({ nativeEvent: { index } }) => {
@@ -104,7 +99,6 @@ const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
                 size={StyleConstants.Font.Size.L}
               />
             }
-            style={{ width: '100%', height: '100%', paddingHorizontal: StyleConstants.Font.Size.M }}
           />
         </Pressable>
       ) : null}

src/components/Timeline/Shared/HeaderDefault.ios.tsx

@@ -51,15 +51,10 @@ const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
       {queryKey ? (
         <Pressable
           accessibilityHint={t('accessibilityHint')}
-          style={{
+          style={{ flex: 1, flexBasis: StyleConstants.Font.Size.L }}
-            flex: 1,
-            flexDirection: 'row',
-            justifyContent: 'center',
-            marginBottom: StyleConstants.Spacing.L
-          }}
-          hitSlop={StyleConstants.Font.Size.M}
         >
           <ContextMenu
+            style={{ flex: 1, alignItems: 'center' }}
             dropdownMenuMode
             actions={contextMenuContext}
             onPress={() => {}}
@@ -70,7 +65,6 @@ const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
                 size={StyleConstants.Font.Size.L}
               />
             }
-            style={{ paddingHorizontal: StyleConstants.Font.Size.M }}
           />
         </Pressable>
       ) : null}

src/components/Timeline/Shared/HeaderNotification.android.tsx

@@ -3,10 +3,7 @@ import contextMenuInstance from '@components/ContextMenu/instance'
 import contextMenuShare from '@components/ContextMenu/share'
 import contextMenuStatus from '@components/ContextMenu/status'
 import Icon from '@components/Icon'
-import {
+import { RelationshipIncoming, RelationshipOutgoing } from '@components/Relationship'
-  RelationshipIncoming,
-  RelationshipOutgoing
-} from '@components/Relationship'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
@@ -37,18 +34,24 @@ const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
           url: status.url || status.uri
         })
       : null
-  const statusOnPress = status && contextMenuStatus({
+  const statusOnPress =
+    status &&
+    contextMenuStatus({
       actions: contextMenuActions,
       status: status,
       queryKey
     })
-  const accountOnPress = status && contextMenuAccount({
+  const accountOnPress =
+    status &&
+    contextMenuAccount({
       actions: contextMenuActions,
       type: 'status',
       queryKey,
       id: status.account.id
     })
-  const instanceOnPress = status && contextMenuInstance({
+  const instanceOnPress =
+    status &&
+    contextMenuInstance({
       actions: contextMenuActions,
       status: status,
       queryKey
@@ -64,14 +67,10 @@ const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
         if (notification.status) {
           return (
             <Pressable
-              style={{
+              style={{ flex: 1, flexBasis: StyleConstants.Font.Size.L }}
-                flex: 1,
-                flexDirection: 'row',
-                justifyContent: 'center',
-                paddingBottom: StyleConstants.Spacing.S
-              }}
               children={
                 <ContextMenu
+                  style={{ flex: 1, alignItems: 'center' }}
                   dropdownMenuMode
                   actions={contextMenuActions}
                   onPress={({ nativeEvent: { index } }) => {
@@ -91,7 +90,6 @@ const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
                       size={StyleConstants.Font.Size.L}
                     />
                   }
-                  style={{ width: '100%', height: '100%' }}
                 />
               }
             />
@@ -104,21 +102,14 @@ const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
     <View style={{ flex: 1, flexDirection: 'row' }}>
       <View
         style={{
-          flex:
+          flex: notification.type === 'follow' || notification.type === 'follow_request' ? 1 : 4
-            notification.type === 'follow' ||
-              notification.type === 'follow_request'
-              ? 1
-              : 4
         }}
       >
         <HeaderSharedAccount
-          account={
+          account={notification.status ? notification.status.account : notification.account}
-            notification.status
+          {...((notification.type === 'follow' || notification.type === 'follow_request') && {
-              ? notification.status.account
+            withoutName: true
-              : notification.account
+          })}
-          }
-          {...((notification.type === 'follow' ||
-            notification.type === 'follow_request') && { withoutName: true })}
         />
         <View
           style={{
@@ -129,28 +120,21 @@ const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
           }}
         >
           <HeaderSharedCreated
-            created_at={
+            created_at={notification.status?.created_at || notification.created_at}
-              notification.status?.created_at || notification.created_at
-            }
             edited_at={notification.status?.edited_at}
           />
           {notification.status?.visibility ? (
-            <HeaderSharedVisibility
+            <HeaderSharedVisibility visibility={notification.status.visibility} />
-              visibility={notification.status.visibility}
-            />
           ) : null}
           <HeaderSharedMuted muted={notification.status?.muted} />
-          <HeaderSharedApplication
+          <HeaderSharedApplication application={notification.status?.application} />
-            application={notification.status?.application}
-          />
         </View>
       </View>
 
       <View
         style={[
           { marginLeft: StyleConstants.Spacing.M },
-          notification.type === 'follow' ||
+          notification.type === 'follow' || notification.type === 'follow_request'
-            notification.type === 'follow_request'
             ? { flexShrink: 1 }
             : { flex: 1 }
         ]}

src/components/Timeline/Shared/HeaderNotification.ios.tsx

@@ -1,8 +1,5 @@
 import Icon from '@components/Icon'
-import {
+import { RelationshipIncoming, RelationshipOutgoing } from '@components/Relationship'
-  RelationshipIncoming,
-  RelationshipOutgoing
-} from '@components/Relationship'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
@@ -36,14 +33,10 @@ const TimelineHeaderNotification = ({ notification }: Props) => {
         if (notification.status) {
           return (
             <Pressable
-              style={{
+              style={{ flex: 1, flexBasis: StyleConstants.Font.Size.L }}
-                flex: 1,
-                flexDirection: 'row',
-                justifyContent: 'center',
-                paddingBottom: StyleConstants.Spacing.S
-              }}
               children={
                 <ContextMenu
+                  style={{ flex: 1, alignItems: 'center' }}
                   dropdownMenuMode
                   actions={contextMenuContext}
                   onPress={() => {}}
@@ -66,21 +59,14 @@ const TimelineHeaderNotification = ({ notification }: Props) => {
     <View style={{ flex: 1, flexDirection: 'row' }}>
       <View
         style={{
-          flex:
+          flex: notification.type === 'follow' || notification.type === 'follow_request' ? 1 : 4
-            notification.type === 'follow' ||
-            notification.type === 'follow_request'
-              ? 1
-              : 4
         }}
       >
         <HeaderSharedAccount
-          account={
+          account={notification.status ? notification.status.account : notification.account}
-            notification.status
+          {...((notification.type === 'follow' || notification.type === 'follow_request') && {
-              ? notification.status.account
+            withoutName: true
-              : notification.account
+          })}
-          }
-          {...((notification.type === 'follow' ||
-            notification.type === 'follow_request') && { withoutName: true })}
         />
         <View
           style={{
@@ -91,28 +77,21 @@ const TimelineHeaderNotification = ({ notification }: Props) => {
           }}
         >
           <HeaderSharedCreated
-            created_at={
+            created_at={notification.status?.created_at || notification.created_at}
-              notification.status?.created_at || notification.created_at
-            }
             edited_at={notification.status?.edited_at}
           />
           {notification.status?.visibility ? (
-            <HeaderSharedVisibility
+            <HeaderSharedVisibility visibility={notification.status.visibility} />
-              visibility={notification.status.visibility}
-            />
           ) : null}
           <HeaderSharedMuted muted={notification.status?.muted} />
-          <HeaderSharedApplication
+          <HeaderSharedApplication application={notification.status?.application} />
-            application={notification.status?.application}
-          />
         </View>
       </View>
 
       <View
         style={[
           { marginLeft: StyleConstants.Spacing.M },
-          notification.type === 'follow' ||
+          notification.type === 'follow' || notification.type === 'follow_request'
-          notification.type === 'follow_request'
             ? { flexShrink: 1 }
             : { flex: 1 }
         ]}