Narrower attachments

For #704

src/components/Timeline/Shared/Attachment/index.tsx

@@ -9,6 +9,7 @@ import { StackNavigationProp } from '@react-navigation/stack'
 import { RootStackParamList } from '@utils/navigation/navigators'
 import { usePreferencesQuery } from '@utils/queryHooks/preferences'
 import { StyleConstants } from '@utils/styles/constants'
+import { isLargeDevice } from '@utils/styles/scaling'
 import { chunk } from 'lodash'
 import React, { useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -179,7 +180,8 @@ const TimelineAttachment = () => {
       style={{
         marginTop: StyleConstants.Spacing.M,
         flex: 1,
-        gap: StyleConstants.Spacing.XS
+        gap: StyleConstants.Spacing.XS,
+        ...(isLargeDevice && { maxWidth: 375 })
       }}
     >
       {chunk(status.media_attachments, 2).map((chunk, chunkIndex) => (

src/components/haptics.ts

@@ -4,9 +4,6 @@ import { Platform } from 'react-native'
 const haptics = (
   type: 'Success' | 'Warning' | 'Error' | 'Light' | 'Medium' | 'Heavy'
 ) => {
-  if (Platform.OS === 'ios' && parseInt(Platform.Version, 10) <= 12) {
-    return
-  }
   if (Platform.OS === 'android') {
     if (type === 'Error') {
       Haptics.impactAsync(Haptics.ImpactFeedbackStyle['Light']).catch(() => {})

src/screens/Tabs/Public/Root.tsx

@@ -13,6 +13,7 @@ import { getGlobalStorage, setGlobalStorage, useGlobalStorage } from '@utils/sto
 import { StorageGlobal } from '@utils/storage/global'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
+import { isLargeDevice } from '@utils/styles/scaling'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { debounce } from 'lodash'
 import { useCallback, useEffect, useRef, useState } from 'react'
@@ -260,7 +261,7 @@ const Explore = ({ route: { key: page } }: { route: { key: 'Explore' } }) => {
                         ? (instanceQuery.data as Mastodon.Instance_V1)?.short_description ||
                           instanceQuery.data?.description
                         : undefined,
-                      lines: 2
+                      lines: isLargeDevice ? 1 : 2
                     })}
                   </Placeholder>
                 </View>

src/screens/Tabs/Shared/Account/Attachments.tsx

@@ -6,6 +6,7 @@ import { TabLocalStackParamList } from '@utils/navigation/navigators'
 import { useTimelineQuery } from '@utils/queryHooks/timeline'
 import { flattenPages } from '@utils/queryHooks/utils'
 import { StyleConstants } from '@utils/styles/constants'
+import { isLargeDevice } from '@utils/styles/scaling'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext } from 'react'
 import { Dimensions, Pressable, View } from 'react-native'
@@ -20,9 +21,11 @@ const AccountAttachments: React.FC = () => {
   const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
   const { colors } = useTheme()
 
-  const DISPLAY_AMOUNT = 6
+  const DISPLAY_AMOUNT = isLargeDevice ? 8 : 6
 
-  const width = (Dimensions.get('window').width - StyleConstants.Spacing.Global.PagePadding * 2) / 4
+  const width =
+    (Dimensions.get('window').width - StyleConstants.Spacing.Global.PagePadding * 2) /
+    (DISPLAY_AMOUNT - 1)
 
   const { data } = useTimelineQuery({
     page: 'Account',

src/utils/styles/scaling.ts

@@ -1,4 +1,6 @@
-const adaptiveScale = (size: number, factor: number = 0) =>
+import { Platform } from 'react-native'
+
+export const adaptiveScale = (size: number, factor: number = 0) =>
   factor ? Math.round(size + size * (factor / 8)) : size
 
-export { adaptiveScale }
+export const isLargeDevice = (Platform.OS === 'ios' && Platform.isPad) || Platform.OS === 'macos'