diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx index c160cab83f..af4ea969f7 100644 --- a/src/view/com/post/Post.tsx +++ b/src/view/com/post/Post.tsx @@ -24,7 +24,7 @@ import {unstableCacheProfileView} from '#/state/queries/profile' import {Link} from '#/view/com/util/Link' import {PostMeta} from '#/view/com/util/PostMeta' import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar' -import {atoms as a, select, useTheme} from '#/alf' +import {atoms as a, select, useBreakpoints, useTheme} from '#/alf' import { GalleryBleed, maybeApplyGalleryOffsetStyles, @@ -115,6 +115,7 @@ function PostInner({ style?: StyleProp onBeforePress?: () => void }) { + const {gtMobile} = useBreakpoints() const queryClient = useQueryClient() const t = useTheme() const {openComposer} = useOpenComposer() @@ -161,6 +162,9 @@ function PostInner({ href={itemHref} style={[ styles.outer, + gtMobile ? a.px_lg : a.px_md, + gtMobile ? a.pt_lg : a.pt_md, + gtMobile ? a.pb_sm : a.pb_xs, t.atoms.border_contrast_low, !hideTopBorder && a.border_t, style, @@ -275,10 +279,6 @@ function PostInner({ const styles = StyleSheet.create({ outer: { - paddingTop: 10, - paddingRight: 15, - paddingBottom: 5, - paddingLeft: 10, // @ts-ignore web only -prf cursor: 'pointer', }, diff --git a/src/view/com/posts/PostFeedItem.tsx b/src/view/com/posts/PostFeedItem.tsx index 9129c4167f..ce9fafb601 100644 --- a/src/view/com/posts/PostFeedItem.tsx +++ b/src/view/com/posts/PostFeedItem.tsx @@ -33,7 +33,7 @@ import { import {Link} from '#/view/com/util/Link' import {PostMeta} from '#/view/com/util/PostMeta' import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar' -import {atoms as a, select, useTheme} from '#/alf' +import {atoms as a, select, useBreakpoints, useTheme} from '#/alf' import { GalleryBleed, maybeApplyGalleryOffsetStyles, @@ -163,6 +163,7 @@ let FeedItemInner = ({ onShowLess?: (interaction: AppBskyFeedDefs.Interaction) => void }): React.ReactNode => { const ax = useAnalytics() + const {gtMobile} = useBreakpoints() const queryClient = useQueryClient() const {openComposer} = useOpenComposer() const pal = usePalette('default') @@ -265,11 +266,15 @@ let FeedItemInner = ({ const outerStyles = [ styles.outer, + gtMobile ? a.pl_sm : a.pl_xs, + gtMobile ? a.pr_lg : a.pr_md, { borderColor: pal.colors.border, paddingBottom: isThreadLastChild || (!isThreadChild && !isThreadParent) - ? 8 + ? gtMobile + ? 14 + : 10 : undefined, borderTopWidth: hideTopBorder || isThreadChild ? 0 : StyleSheet.hairlineWidth, @@ -358,7 +363,7 @@ let FeedItemInner = ({ )} - + {reason && (