+2 -2

bskyembed/src/components/embed.tsx

··· 330 330 {content.external.thumb && ( 331 331 <img 332 332 src={content.external.thumb} 333 333 - className="aspect-[1.91/1] object-cover" 333 333 + className="aspect-[1200/630] object-cover" 334 334 /> 335 335 )} 336 336 <div className="py-3 px-4"> ··· 435 435 <Link 436 436 href={starterPackHref} 437 437 className="w-full rounded-xl overflow-hidden border dark:border-slate-600 flex flex-col items-stretch"> 438 438 - <img src={imageUri} className="aspect-[1.91/1] object-cover" /> 438 438 + <img src={imageUri} className="aspect-[1200/630] object-cover" /> 439 439 <div className="py-3 px-4"> 440 440 <div className="flex space-x-2 items-center"> 441 441 <img src={starterPackIcon} className="w-10 h-10" />

+12 -1

src/alf/atoms.ts

··· 1 1 import {type StyleProp, type ViewStyle} from 'react-native' 2 2 import {atoms as baseAtoms} from '@bsky.app/alf' 3 3 4 4 + import {CARD_ASPECT_RATIO} from '#/lib/constants' 4 5 import {native, platform, web} from '#/alf/util/platform' 5 6 import * as Layout from '#/components/Layout' 6 7 ··· 31 32 backgroundColor: 'transparent', 32 33 }, 33 34 35 35 + /** 36 36 + * Aspect ratios 37 37 + */ 38 38 + aspect_square: { 39 39 + aspectRatio: 1, 40 40 + }, 41 41 + aspect_card: { 42 42 + aspectRatio: CARD_ASPECT_RATIO, 43 43 + }, 44 44 + 34 45 /* 35 46 * Transition 36 47 */ ··· 67 78 }), 68 79 69 80 /* 70 70 - * Animaations 81 81 + * Animations 71 82 */ 72 83 fade_in: web({ 73 84 animation: 'fadeIn ease-out 0.15s',

+2 -2

src/components/InterestTabs.tsx

··· 258 258 t.atoms.border_contrast_low, 259 259 t.atoms.bg, 260 260 a.h_full, 261 261 - {aspectRatio: 1}, 261 261 + a.aspect_square, 262 262 a.rounded_full, 263 263 ]}> 264 264 <ButtonIcon icon={ArrowLeft} /> ··· 292 292 t.atoms.border_contrast_low, 293 293 t.atoms.bg, 294 294 a.h_full, 295 295 - {aspectRatio: 1}, 295 295 + a.aspect_square, 296 296 a.rounded_full, 297 297 ]}> 298 298 <ButtonIcon icon={ArrowRight} />

+3 -2

src/components/MediaPreview.tsx

··· 87 87 }) { 88 88 const t = useTheme() 89 89 return ( 90 90 - <View style={[a.relative, a.flex_1, {aspectRatio: 1, maxWidth: 100}]}> 90 90 + <View style={[a.relative, a.flex_1, a.aspect_square, {maxWidth: 100}]}> 91 91 <Image 92 92 key={thumbnail} 93 93 source={{uri: thumbnail}} ··· 131 131 style={[ 132 132 {backgroundColor: 'black'}, 133 133 a.flex_1, 134 134 - {aspectRatio: 1, maxWidth: 100}, 134 134 + a.aspect_square, 135 135 + {maxWidth: 100}, 135 136 a.justify_center, 136 137 a.align_center, 137 138 ]}>

+1 -3

src/components/Post/Embed/ExternalEmbed/index.tsx

··· 97 97 ]}> 98 98 {imageUri && !embedPlayerParams ? ( 99 99 <Image 100 100 - style={{ 101 101 - aspectRatio: 1.91, 102 102 - }} 100 100 + style={[a.aspect_card]} 103 101 source={{uri: imageUri}} 104 102 accessibilityIgnoresInvertColors 105 103 />

+1 -1

src/components/StarterPack/ShareDialog.tsx

··· 91 91 source={{uri: imageUrl}} 92 92 style={[ 93 93 a.rounded_sm, 94 94 + a.aspect_card, 94 95 { 95 95 - aspectRatio: 1200 / 630, 96 96 transform: [{scale: gtMobile ? 0.85 : 1}], 97 97 marginTop: gtMobile ? -20 : 0, 98 98 },

+1 -1

src/components/StarterPack/StarterPackCard.tsx

··· 191 191 <Link starterPack={starterPack}> 192 192 <Image 193 193 source={imageUri} 194 194 - style={[a.w_full, {aspectRatio: 1.91}]} 194 194 + style={[a.w_full, a.aspect_card]} 195 195 accessibilityIgnoresInvertColors={true} 196 196 /> 197 197 <View style={[a.px_sm, a.py_md]}>

+2 -1

src/components/dialogs/GifSelect.tsx

··· 300 300 a.flex_1, 301 301 a.mb_sm, 302 302 a.rounded_sm, 303 303 - {aspectRatio: 1, opacity: pressed ? 0.8 : 1}, 303 303 + a.aspect_card, 304 304 + {opacity: pressed ? 0.8 : 1}, 304 305 t.atoms.bg_contrast_25, 305 306 ]} 306 307 source={{

+1 -1

src/components/live/LiveStatusDialog.tsx

··· 102 102 style={[ 103 103 t.atoms.bg_contrast_25, 104 104 a.w_full, 105 105 - {aspectRatio: 1.91}, 105 105 + a.aspect_card, 106 106 android([ 107 107 a.overflow_hidden, 108 108 {

+1

src/lib/constants.ts

··· 17 17 export const EMBED_SCRIPT = `${EMBED_SERVICE}/static/embed.js` 18 18 export const BSKY_DOWNLOAD_URL = 'https://bsky.app/download' 19 19 export const STARTER_PACK_MAX_SIZE = 150 20 20 + export const CARD_ASPECT_RATIO = 1200 / 630 20 21 21 22 // HACK 22 23 // Yes, this is exactly what it looks like. It's a hard-coded constant

+1 -1

src/screens/Onboarding/StepFinished.tsx

··· 401 401 ]}> 402 402 <Image 403 403 source={image} 404 404 - style={[a.w_full, {aspectRatio: 1}]} 404 404 + style={[a.w_full, a.aspect_square]} 405 405 alt={alt} 406 406 accessibilityIgnoresInvertColors={false} // I guess we do need it to blend into the background 407 407 />

+4 -4

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

··· 67 67 const containerRefs = [containerRef1, containerRef2] 68 68 return ( 69 69 <View style={[a.flex_1, a.flex_row, gap]}> 70 70 - <View style={[a.flex_1, {aspectRatio: 1}]}> 70 70 + <View style={[a.flex_1, a.aspect_square]}> 71 71 <GalleryItem 72 72 {...props} 73 73 index={0} ··· 76 76 thumbDimsRef={thumbDimsRef} 77 77 /> 78 78 </View> 79 79 - <View style={[a.flex_1, {aspectRatio: 1}]}> 79 79 + <View style={[a.flex_1, a.aspect_square]}> 80 80 <GalleryItem 81 81 {...props} 82 82 index={1} ··· 93 93 const containerRefs = [containerRef1, containerRef2, containerRef3] 94 94 return ( 95 95 <View style={[a.flex_1, a.flex_row, gap]}> 96 96 - <View style={[a.flex_1, {aspectRatio: 1}]}> 96 96 + <View style={[a.flex_1, a.aspect_square]}> 97 97 <GalleryItem 98 98 {...props} 99 99 index={0} ··· 102 102 thumbDimsRef={thumbDimsRef} 103 103 /> 104 104 </View> 105 105 - <View style={[a.flex_1, {aspectRatio: 1}, gap]}> 105 105 + <View style={[a.flex_1, a.aspect_square, gap]}> 106 106 <View style={[a.flex_1]}> 107 107 <GalleryItem 108 108 {...props}