+13 -5

src/components/MediaInsetBorder.tsx

··· 1 1 + import {StyleSheet} from 'react-native' 1 2 import type React from 'react' 2 3 3 3 - import {atoms as a, useTheme, type ViewStyleProp} from '#/alf' 4 4 + import {isHighDPI} from '#/lib/browser' 5 5 + import {atoms as a, platform, useTheme, type ViewStyleProp} from '#/alf' 4 6 import {Fill} from '#/components/Fill' 5 7 6 8 /** ··· 25 27 <Fill 26 28 style={[ 27 29 a.rounded_md, 28 28 - a.border, 30 30 + { 31 31 + borderWidth: platform({ 32 32 + native: StyleSheet.hairlineWidth, 33 33 + // while we generally use hairlineWidth (aka 1px), 34 34 + // we make an exception here for high DPI screens 35 35 + // as the 1px border is very noticeable -sfn 36 36 + web: isHighDPI ? 0.5 : StyleSheet.hairlineWidth, 37 37 + }), 38 38 + }, 29 39 opaque 30 40 ? [t.atoms.border_contrast_low] 31 41 : [ ··· 34 44 : t.atoms.border_contrast_high, 35 45 {opacity: 0.6}, 36 46 ], 37 37 - { 38 38 - pointerEvents: 'none', 39 39 - }, 47 47 + a.pointer_events_none, 40 48 style, 41 49 ]}> 42 50 {children}

+1

src/lib/browser.native.ts

··· 2 2 export const isFirefox = false 3 3 export const isTouchDevice = true 4 4 export const isAndroidWeb = false 5 5 + export const isHighDPI = true

+1

src/lib/browser.ts

··· 6 6 export const isTouchDevice = window.matchMedia('(pointer: coarse)').matches 7 7 export const isAndroidWeb = 8 8 /android/i.test(navigator.userAgent) && isTouchDevice 9 9 + export const isHighDPI = window.matchMedia('(min-resolution: 2dppx)').matches