Tweak padding around posts

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<ViewStyle>
   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',
   },

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 = ({
             )}
           </View>
 
-          <View style={[a.pt_sm, a.flex_shrink]}>
+          <View style={[gtMobile ? a.pt_lg : a.pt_md, a.flex_shrink]}>
             {reason && (
               <PostFeedReason
                 reason={reason}
@@ -542,8 +547,6 @@ PostContent = memo(PostContent)
 
 const styles = StyleSheet.create({
   outer: {
-    paddingLeft: 10,
-    paddingRight: 15,
     cursor: 'pointer',
   },
   replyLine: {