+2 -2

bskyembed/src/components/embed.tsx

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

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

+12 -1

src/alf/atoms.ts

··· 1 import {type StyleProp, type ViewStyle} from 'react-native' 2 import {atoms as baseAtoms} from '@bsky.app/alf' 3 0 4 import {native, platform, web} from '#/alf/util/platform' 5 import * as Layout from '#/components/Layout' 6 ··· 31 backgroundColor: 'transparent', 32 }, 33 0 0 0 0 0 0 0 0 0 0 34 /* 35 * Transition 36 */ ··· 67 }), 68 69 /* 70 - * Animaations 71 */ 72 fade_in: web({ 73 animation: 'fadeIn ease-out 0.15s',

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

+2 -2

src/components/InterestTabs.tsx

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

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

+3 -2

src/components/MediaPreview.tsx

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

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

+1 -3

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

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

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

+1 -1

src/components/StarterPack/ShareDialog.tsx

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

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

+1 -1

src/components/StarterPack/StarterPackCard.tsx

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

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

+2 -1

src/components/dialogs/GifSelect.tsx

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

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

+1 -1

src/components/live/LiveStatusDialog.tsx

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

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

+1

src/lib/constants.ts

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

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

+1 -1

src/screens/Onboarding/StepFinished.tsx

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

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

+4 -4

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

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

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