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
parent
ae25cb3391
commit
e7a0055a85
|
@ -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',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
|
@ -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={[
|
||||||
|
|
|
@ -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),
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue