From bd3594ceea9e6df7396b3cc11062f4e211661406 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Fri, 31 Oct 2025 16:07:43 +0200
Subject: [PATCH] use 0.5px media border on high DPI screens on web (#9311)

---
 src/components/MediaInsetBorder.tsx | 18 +++++++++++++-----
 src/lib/browser.native.ts           |  1 +
 src/lib/browser.ts                  |  1 +
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/MediaInsetBorder.tsx b/src/components/MediaInsetBorder.tsx
index a341a77d3d..7b938ae9a8 100644
--- a/src/components/MediaInsetBorder.tsx
+++ b/src/components/MediaInsetBorder.tsx
@@ -1,6 +1,8 @@
+import {StyleSheet} from 'react-native'
 import type React from 'react'
 
-import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
+import {isHighDPI} from '#/lib/browser'
+import {atoms as a, platform, useTheme, type ViewStyleProp} from '#/alf'
 import {Fill} from '#/components/Fill'
 
 /**
@@ -25,7 +27,15 @@ export function MediaInsetBorder({
     <Fill
       style={[
         a.rounded_md,
-        a.border,
+        {
+          borderWidth: platform({
+            native: StyleSheet.hairlineWidth,
+            // while we generally use hairlineWidth (aka 1px),
+            // we make an exception here for high DPI screens
+            // as the 1px border is very noticeable -sfn
+            web: isHighDPI ? 0.5 : StyleSheet.hairlineWidth,
+          }),
+        },
         opaque
           ? [t.atoms.border_contrast_low]
           : [
@@ -34,9 +44,7 @@ export function MediaInsetBorder({
                 : t.atoms.border_contrast_high,
               {opacity: 0.6},
             ],
-        {
-          pointerEvents: 'none',
-        },
+        a.pointer_events_none,
         style,
       ]}>
       {children}
diff --git a/src/lib/browser.native.ts b/src/lib/browser.native.ts
index 8e045138c8..efee4b1940 100644
--- a/src/lib/browser.native.ts
+++ b/src/lib/browser.native.ts
@@ -2,3 +2,4 @@ export const isSafari = false
 export const isFirefox = false
 export const isTouchDevice = true
 export const isAndroidWeb = false
+export const isHighDPI = true
diff --git a/src/lib/browser.ts b/src/lib/browser.ts
index 36563ee751..91e9986a05 100644
--- a/src/lib/browser.ts
+++ b/src/lib/browser.ts
@@ -6,3 +6,4 @@ export const isFirefox = /firefox|fxios/i.test(navigator.userAgent)
 export const isTouchDevice = window.matchMedia('(pointer: coarse)').matches
 export const isAndroidWeb =
   /android/i.test(navigator.userAgent) && isTouchDevice
+export const isHighDPI = window.matchMedia('(min-resolution: 2dppx)').matches