Fix overflow on posts (#4899)

* overflow posts, via contentHider

* margin->padding for a bit more leeway

* overflow notifications

* overflow on header

* revert from contenthider, put on text in all places

* fix zalgo text in handle in composer

---------

Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com>
zio/stable
Samuel Newman 2024-08-08 18:04:40 +01:00 committed by GitHub
parent ae25cb3391
commit e7a0055a85
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 15 additions and 32 deletions

View File

@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import {StyleProp, View, ViewStyle} from 'react-native'
import {ModerationUI} from '@atproto/api' import {ModerationUI} from '@atproto/api'
import {msg, Trans} from '@lingui/macro' import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
@ -40,7 +40,7 @@ export function ContentHider({
if (!blur || (ignoreMute && isJustAMute(modui))) { if (!blur || (ignoreMute && isJustAMute(modui))) {
return ( return (
<View testID={testID} style={[styles.outer, style]}> <View testID={testID} style={style}>
{children} {children}
</View> </View>
) )
@ -163,21 +163,3 @@ export function ContentHider({
</View> </View>
) )
} }
const styles = StyleSheet.create({
outer: {},
cover: {
flexDirection: 'row',
alignItems: 'center',
gap: 6,
borderRadius: 8,
marginTop: 4,
paddingVertical: 14,
paddingLeft: 14,
paddingRight: 18,
},
showBtn: {
marginLeft: 'auto',
alignSelf: 'center',
},
})

View File

@ -157,7 +157,7 @@ let ProfileHeaderStandard = ({
hideBackButton={hideBackButton} hideBackButton={hideBackButton}
isPlaceholderProfile={isPlaceholderProfile}> isPlaceholderProfile={isPlaceholderProfile}>
<View <View
style={[a.px_lg, a.pt_md, a.pb_sm]} style={[a.px_lg, a.pt_md, a.pb_sm, a.overflow_hidden]}
pointerEvents={isIOS ? 'auto' : 'box-none'}> pointerEvents={isIOS ? 'auto' : 'box-none'}>
<View <View
style={[ style={[

View File

@ -91,7 +91,7 @@ export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) {
type={replyTo.author.associated?.labeler ? 'labeler' : 'user'} type={replyTo.author.associated?.labeler ? 'labeler' : 'user'}
/> />
<View style={styles.replyToPost}> <View style={styles.replyToPost}>
<Text type="xl-medium" style={t.atoms.text}> <Text type="xl-medium" style={t.atoms.text} numberOfLines={1}>
{sanitizeDisplayName( {sanitizeDisplayName(
replyTo.author.displayName || sanitizeHandle(replyTo.author.handle), replyTo.author.displayName || sanitizeHandle(replyTo.author.handle),
)} )}

View File

@ -253,6 +253,7 @@ let FeedItem = ({
borderColor: pal.colors.unreadNotifBorder, borderColor: pal.colors.unreadNotifBorder,
}, },
{borderTopWidth: hideTopBorder ? 0 : StyleSheet.hairlineWidth}, {borderTopWidth: hideTopBorder ? 0 : StyleSheet.hairlineWidth},
a.overflow_hidden,
]} ]}
href={itemHref} href={itemHref}
noFeedback noFeedback
@ -545,7 +546,7 @@ function ExpandedAuthorsList({
}, [heightInterp, visible]) }, [heightInterp, visible])
return ( return (
<Animated.View style={[heightStyle, styles.overflowHidden]}> <Animated.View style={[a.overflow_hidden, heightStyle]}>
{visible && {visible &&
authors.map(author => ( authors.map(author => (
<NewLink <NewLink
@ -641,9 +642,6 @@ function AdditionalPostText({post}: {post?: AppBskyFeedDefs.PostView}) {
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
overflowHidden: {
overflow: 'hidden',
},
pointer: isWeb pointer: isWeb
? { ? {
// @ts-ignore web only // @ts-ignore web only

View File

@ -742,6 +742,7 @@ const styles = StyleSheet.create({
flexWrap: 'wrap', flexWrap: 'wrap',
paddingBottom: 4, paddingBottom: 4,
paddingRight: 10, paddingRight: 10,
overflow: 'hidden',
}, },
postTextLargeContainer: { postTextLargeContainer: {
paddingHorizontal: 0, paddingHorizontal: 0,

View File

@ -12,17 +12,17 @@ import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useQueryClient} from '@tanstack/react-query' import {useQueryClient} from '@tanstack/react-query'
import {MAX_POST_LINES} from '#/lib/constants'
import {usePalette} from '#/lib/hooks/usePalette'
import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped'
import {makeProfileLink} from '#/lib/routes/links'
import {countLines} from '#/lib/strings/helpers'
import {colors, s} from '#/lib/styles'
import {POST_TOMBSTONE, Shadow, usePostShadow} from '#/state/cache/post-shadow' import {POST_TOMBSTONE, Shadow, usePostShadow} from '#/state/cache/post-shadow'
import {useModerationOpts} from '#/state/preferences/moderation-opts' import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {precacheProfile} from '#/state/queries/profile'
import {useSession} from '#/state/session' import {useSession} from '#/state/session'
import {useComposerControls} from '#/state/shell/composer' import {useComposerControls} from '#/state/shell/composer'
import {MAX_POST_LINES} from 'lib/constants'
import {usePalette} from 'lib/hooks/usePalette'
import {makeProfileLink} from 'lib/routes/links'
import {countLines} from 'lib/strings/helpers'
import {colors, s} from 'lib/styles'
import {precacheProfile} from 'state/queries/profile'
import {AviFollowButton} from '#/view/com/posts/AviFollowButton' import {AviFollowButton} from '#/view/com/posts/AviFollowButton'
import {atoms as a} from '#/alf' import {atoms as a} from '#/alf'
import {ProfileHoverCard} from '#/components/ProfileHoverCard' import {ProfileHoverCard} from '#/components/ProfileHoverCard'
@ -280,6 +280,7 @@ const styles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
flexWrap: 'wrap', flexWrap: 'wrap',
overflow: 'hidden',
}, },
replyLine: { replyLine: {
position: 'absolute', position: 'absolute',

View File

@ -544,6 +544,7 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
flexWrap: 'wrap', flexWrap: 'wrap',
paddingBottom: 2, paddingBottom: 2,
overflow: 'hidden',
}, },
contentHiderChild: { contentHiderChild: {
marginTop: 6, marginTop: 6,