Fix video letterboxing issue (#9339)

* give video a black background on web

* Video crop on web tweaks (#9371)

* Remove video embed crop option to reduce confusion

* Improve default thumb and border on web

---------

Co-authored-by: Eric Bailey <git@esb.lol>

src/view/com/util/images/AutoSizedImage.tsx

@@ -13,7 +13,7 @@ import {useLingui} from '@lingui/react'
 import {type Dimensions} from '#/lib/media/types'
 import {isNative} from '#/platform/detection'
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {ArrowsDiagonalOut_Stroke2_Corner0_Rounded as Fullscreen} from '#/components/icons/ArrowsDiagonal'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {Text} from '#/components/Typography'
@@ -30,18 +30,16 @@ export function ConstrainedImage({
   children: React.ReactNode
 }) {
   const t = useTheme()
-  const {gtMobile} = useBreakpoints()
   /**
    * Computed as a % value to apply as `paddingTop`, this basically controls
    * the height of the image.
    */
   const outerAspectRatio = React.useMemo<DimensionValue>(() => {
-    const ratio =
-      isNative || !gtMobile
-        ? Math.min(1 / aspectRatio, minMobileAspectRatio ?? 16 / 9) // 9:16 bounding box
-        : Math.min(1 / aspectRatio, 1) // 1:1 bounding box
+    const ratio = isNative
+      ? Math.min(1 / aspectRatio, minMobileAspectRatio ?? 16 / 9) // 9:16 bounding box
+      : Math.min(1 / aspectRatio, 1) // 1:1 bounding box
     return `${ratio * 100}%`
-  }, [aspectRatio, gtMobile, minMobileAspectRatio])
+  }, [aspectRatio, minMobileAspectRatio])
 
   return (
     <View style={[a.w_full]}>