diff --git a/src/lib/hooks/useWebMediaQueries.tsx b/src/lib/hooks/useWebMediaQueries.tsx
index fd7e383f..3f43a0aa 100644
--- a/src/lib/hooks/useWebMediaQueries.tsx
+++ b/src/lib/hooks/useWebMediaQueries.tsx
@@ -2,13 +2,19 @@ import {useMediaQuery} from 'react-responsive'
import {isNative} from 'platform/detection'
export function useWebMediaQueries() {
- const isDesktop = useMediaQuery({
- query: '(min-width: 1224px)',
- })
- const isTabletOrMobile = useMediaQuery({query: '(max-width: 1224px)'})
- const isMobile = useMediaQuery({query: '(max-width: 800px)'})
+ const isDesktop = useMediaQuery({minWidth: 1300})
+ const isTablet = useMediaQuery({minWidth: 800, maxWidth: 1300})
+ const isMobile = useMediaQuery({maxWidth: 800})
+ const isTabletOrMobile = isMobile || isTablet
+ const isTabletOrDesktop = isDesktop || isTablet
if (isNative) {
- return {isMobile: true, isTabletOrMobile: true, isDesktop: false}
+ return {
+ isMobile: true,
+ isTablet: false,
+ isTabletOrMobile: true,
+ isTabletOrDesktop: false,
+ isDesktop: false,
+ }
}
- return {isMobile, isTabletOrMobile, isDesktop}
+ return {isMobile, isTablet, isTabletOrMobile, isTabletOrDesktop, isDesktop}
}
diff --git a/src/platform/detection.ts b/src/platform/detection.ts
index 41ca20e5..d414b008 100644
--- a/src/platform/detection.ts
+++ b/src/platform/detection.ts
@@ -7,7 +7,7 @@ export const isAndroid = Platform.OS === 'android'
export const isNative = isIOS || isAndroid
export const devicePlatform = isIOS ? 'ios' : isAndroid ? 'android' : 'web'
export const isWeb = !isNative
-export const isMobileWebMediaQuery = 'only screen and (max-width: 1230px)'
+export const isMobileWebMediaQuery = 'only screen and (max-width: 1300px)'
export const isMobileWeb =
isWeb &&
// @ts-ignore we know window exists -prf
diff --git a/src/state/models/feeds/multi-feed.ts b/src/state/models/feeds/multi-feed.ts
index fdcd208c..95574fb5 100644
--- a/src/state/models/feeds/multi-feed.ts
+++ b/src/state/models/feeds/multi-feed.ts
@@ -111,7 +111,8 @@ export class PostsMultiFeedModel {
uri: makeProfileLink(feedInfo.data.creator, 'feed', urip.rkey),
})
}
- if (!this.hasMore) {
+ if (!this.hasMore && this.hasContent) {
+ // only show if hasContent to avoid double discover-feed links
items.push({_reactKey: '__footer__', type: 'footer'})
}
return items
diff --git a/src/view/com/auth/onboarding/WelcomeDesktop.tsx b/src/view/com/auth/onboarding/WelcomeDesktop.tsx
index e6369344..7b7555ac 100644
--- a/src/view/com/auth/onboarding/WelcomeDesktop.tsx
+++ b/src/view/com/auth/onboarding/WelcomeDesktop.tsx
@@ -16,9 +16,7 @@ type Props = {
export const WelcomeDesktop = observer(({next}: Props) => {
const pal = usePalette('default')
- const horizontal = useMediaQuery({
- query: '(min-width: 1230px)',
- })
+ const horizontal = useMediaQuery({minWidth: 1300})
const title = (
<>
void
@@ -95,7 +94,7 @@ export const WelcomeMobile = observer(({next, skip}: Props) => {
const styles = StyleSheet.create({
container: {
flex: 1,
- marginBottom: isDesktopWeb ? 30 : 60,
+ marginBottom: 60,
marginHorizontal: 16,
justifyContent: 'space-between',
},
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index c801c47b..8ed0bb37 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -37,9 +37,10 @@ import {toShortUrl} from 'lib/strings/url-helpers'
import {SelectPhotoBtn} from './photos/SelectPhotoBtn'
import {OpenCameraBtn} from './photos/OpenCameraBtn'
import {usePalette} from 'lib/hooks/usePalette'
-import QuoteEmbed from '../util/post-embeds/QuoteEmbed'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {useExternalLinkFetch} from './useExternalLinkFetch'
-import {isDesktopWeb, isAndroid, isIOS} from 'platform/detection'
+import {isWeb, isNative, isAndroid, isIOS} from 'platform/detection'
+import QuoteEmbed from '../util/post-embeds/QuoteEmbed'
import {GalleryModel} from 'state/models/media/gallery'
import {Gallery} from './photos/Gallery'
import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
@@ -61,6 +62,7 @@ export const ComposePost = observer(function ComposePost({
}: Props) {
const {track} = useAnalytics()
const pal = usePalette('default')
+ const {isDesktop, isMobile} = useWebMediaQueries()
const store = useStores()
const textInput = useRef(null)
const [isKeyboardVisible] = useIsKeyboardVisible({iosUseWillEvents: true})
@@ -99,9 +101,9 @@ export const ComposePost = observer(function ComposePost({
() => ({
paddingBottom:
isAndroid || (isIOS && !isKeyboardVisible) ? insets.bottom : 0,
- paddingTop: isAndroid ? insets.top : isDesktopWeb ? 0 : 15,
+ paddingTop: isAndroid ? insets.top : isMobile ? 15 : 0,
}),
- [insets, isKeyboardVisible],
+ [insets, isKeyboardVisible, isMobile],
)
const onPressCancel = useCallback(() => {
@@ -143,7 +145,7 @@ export const ComposePost = observer(function ComposePost({
[onPressCancel],
)
useEffect(() => {
- if (isDesktopWeb) {
+ if (isWeb) {
window.addEventListener('keydown', onEscape)
return () => window.removeEventListener('keydown', onEscape)
}
@@ -240,7 +242,7 @@ export const ComposePost = observer(function ComposePost({
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.outer}>
-
+
) : undefined}
-
+
)}
{quote ? (
-
+
) : undefined}
@@ -395,7 +402,7 @@ export const ComposePost = observer(function ComposePost({
) : null}
- {isDesktopWeb ? : null}
+ {isDesktop ? : null}
@@ -414,11 +421,14 @@ const styles = StyleSheet.create({
topbar: {
flexDirection: 'row',
alignItems: 'center',
- paddingTop: isDesktopWeb ? 10 : undefined,
- paddingBottom: isDesktopWeb ? 10 : 4,
+ paddingBottom: 4,
paddingHorizontal: 20,
height: 55,
},
+ topbarDesktop: {
+ paddingTop: 10,
+ paddingBottom: 10,
+ },
postBtn: {
borderRadius: 20,
paddingHorizontal: 20,
@@ -465,11 +475,13 @@ const styles = StyleSheet.create({
paddingHorizontal: 15,
},
textInputLayout: {
- flex: isDesktopWeb ? undefined : 1,
flexDirection: 'row',
borderTopWidth: 1,
paddingTop: 16,
},
+ textInputLayoutMobile: {
+ flex: 1,
+ },
replyToLayout: {
flexDirection: 'row',
borderTopWidth: 1,
diff --git a/src/view/com/composer/Prompt.tsx b/src/view/com/composer/Prompt.tsx
index 98a10b0f..01fd7d1f 100644
--- a/src/view/com/composer/Prompt.tsx
+++ b/src/view/com/composer/Prompt.tsx
@@ -4,11 +4,12 @@ import {UserAvatar} from '../util/UserAvatar'
import {Text} from '../util/text/Text'
import {usePalette} from 'lib/hooks/usePalette'
import {useStores} from 'state/index'
-import {isDesktopWeb} from 'platform/detection'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
export function ComposePrompt({onPressCompose}: {onPressCompose: () => void}) {
const store = useStores()
const pal = usePalette('default')
+ const {isDesktop} = useWebMediaQueries()
return (
void}) {
type="xl"
style={[
pal.text,
- isDesktopWeb ? styles.labelDesktopWeb : styles.labelMobile,
+ isDesktop ? styles.labelDesktopWeb : styles.labelMobile,
]}>
Write your reply
diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx
index 6dba2f01..d5465f79 100644
--- a/src/view/com/composer/photos/Gallery.tsx
+++ b/src/view/com/composer/photos/Gallery.tsx
@@ -7,10 +7,10 @@ import {s, colors} from 'lib/styles'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {Image} from 'expo-image'
import {Text} from 'view/com/util/text/Text'
-import {isDesktopWeb} from 'platform/detection'
import {openAltTextModal} from 'lib/media/alt-text'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
interface Props {
gallery: GalleryModel
@@ -19,13 +19,14 @@ interface Props {
export const Gallery = observer(function ({gallery}: Props) {
const store = useStores()
const pal = usePalette('default')
+ const {isMobile} = useWebMediaQueries()
let side: number
if (gallery.size === 1) {
side = 250
} else {
- side = (isDesktopWeb ? 560 : 350) / gallery.size
+ side = (isMobile ? 350 : 560) / gallery.size
}
const imageStyle = {
@@ -33,14 +34,14 @@ export const Gallery = observer(function ({gallery}: Props) {
width: side,
}
- const isOverflow = !isDesktopWeb && gallery.size > 2
+ const isOverflow = isMobile && gallery.size > 2
const altTextControlStyle = isOverflow
? {
left: 4,
bottom: 4,
}
- : isDesktopWeb && gallery.size < 3
+ : !isMobile && gallery.size < 3
? {
left: 8,
top: 8,
@@ -60,7 +61,7 @@ export const Gallery = observer(function ({gallery}: Props) {
right: 4,
gap: 4,
}
- : isDesktopWeb && gallery.size < 3
+ : !isMobile && gallery.size < 3
? {
top: 8,
right: 8,
diff --git a/src/view/com/lists/ListItems.tsx b/src/view/com/lists/ListItems.tsx
index 7f2173d7..d611bc50 100644
--- a/src/view/com/lists/ListItems.tsx
+++ b/src/view/com/lists/ListItems.tsx
@@ -22,9 +22,9 @@ import {TextLink} from '../util/Link'
import {ListModel} from 'state/models/content/list'
import {useAnalytics} from 'lib/analytics/analytics'
import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {useStores} from 'state/index'
import {s} from 'lib/styles'
-import {isDesktopWeb} from 'platform/detection'
import {ListActions} from './ListActions'
import {makeProfileLink} from 'lib/routes/links'
import {sanitizeHandle} from 'lib/strings/handles'
@@ -283,6 +283,7 @@ const ListHeader = observer(
}) => {
const pal = usePalette('default')
const store = useStores()
+ const {isDesktop} = useWebMediaQueries()
const descriptionRT = React.useMemo(
() =>
list?.description &&
@@ -318,7 +319,7 @@ const ListHeader = observer(
richText={descriptionRT}
/>
)}
- {isDesktopWeb && (
+ {isDesktop && (
-
+
@@ -365,10 +367,6 @@ const styles = StyleSheet.create({
gap: 8,
marginTop: 12,
},
- fakeSelector: {
- flexDirection: 'row',
- paddingHorizontal: isDesktopWeb ? 16 : 6,
- },
fakeSelectorItem: {
paddingHorizontal: 12,
paddingBottom: 8,
diff --git a/src/view/com/modals/AddAppPasswords.tsx b/src/view/com/modals/AddAppPasswords.tsx
index 6117924a..2a867213 100644
--- a/src/view/com/modals/AddAppPasswords.tsx
+++ b/src/view/com/modals/AddAppPasswords.tsx
@@ -5,7 +5,7 @@ import {Button} from '../util/forms/Button'
import {s} from 'lib/styles'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
-import {isDesktopWeb} from 'platform/detection'
+import {isNative} from 'platform/detection'
import {
FontAwesomeIcon,
FontAwesomeIconStyle,
@@ -205,7 +205,7 @@ export function Component({}: {}) {
const styles = StyleSheet.create({
container: {
flex: 1,
- paddingBottom: isDesktopWeb ? 0 : 50,
+ paddingBottom: isNative ? 50 : 0,
paddingHorizontal: 16,
},
textInputWrapper: {
diff --git a/src/view/com/modals/AltImage.tsx b/src/view/com/modals/AltImage.tsx
index e1145a0f..c084e84a 100644
--- a/src/view/com/modals/AltImage.tsx
+++ b/src/view/com/modals/AltImage.tsx
@@ -18,7 +18,7 @@ import {useTheme} from 'lib/ThemeContext'
import {Text} from '../util/text/Text'
import LinearGradient from 'react-native-linear-gradient'
import {useStores} from 'state/index'
-import {isDesktopWeb, isAndroid} from 'platform/detection'
+import {isAndroid, isWeb} from 'platform/detection'
import {ImageModel} from 'state/models/media/image'
export const snapPoints = ['fullscreen']
@@ -35,7 +35,7 @@ export function Component({image}: Props) {
const windim = useWindowDimensions()
const imageStyles = useMemo(() => {
- const maxWidth = isDesktopWeb ? 450 : windim.width
+ const maxWidth = isWeb ? 450 : windim.width
if (image.height > image.width) {
return {
resizeMode: 'contain',
@@ -137,12 +137,12 @@ const styles = StyleSheet.create({
flex: 1,
height: '100%',
width: '100%',
- paddingVertical: isDesktopWeb ? 0 : 18,
+ paddingVertical: isWeb ? 0 : 18,
},
scrollContainer: {
flex: 1,
height: '100%',
- paddingHorizontal: isDesktopWeb ? 0 : 12,
+ paddingHorizontal: isWeb ? 0 : 12,
},
scrollInner: {
gap: 12,
diff --git a/src/view/com/modals/Confirm.tsx b/src/view/com/modals/Confirm.tsx
index f9bc0de1..27017718 100644
--- a/src/view/com/modals/Confirm.tsx
+++ b/src/view/com/modals/Confirm.tsx
@@ -11,7 +11,7 @@ import {s, colors} from 'lib/styles'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {cleanError} from 'lib/strings/errors'
import {usePalette} from 'lib/hooks/usePalette'
-import {isDesktopWeb} from 'platform/detection'
+import {isWeb} from 'platform/detection'
import type {ConfirmModal} from 'state/models/ui/shell'
export const snapPoints = ['50%']
@@ -96,7 +96,7 @@ const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
- paddingBottom: isDesktopWeb ? 0 : 60,
+ paddingBottom: isWeb ? 0 : 60,
},
title: {
textAlign: 'center',
diff --git a/src/view/com/modals/ContentFilteringSettings.tsx b/src/view/com/modals/ContentFilteringSettings.tsx
index f39351fe..588b2135 100644
--- a/src/view/com/modals/ContentFilteringSettings.tsx
+++ b/src/view/com/modals/ContentFilteringSettings.tsx
@@ -11,13 +11,15 @@ import {TextLink} from '../util/Link'
import {ToggleButton} from '../util/forms/ToggleButton'
import {usePalette} from 'lib/hooks/usePalette'
import {CONFIGURABLE_LABEL_GROUPS} from 'lib/labeling/const'
-import {isDesktopWeb, isIOS} from 'platform/detection'
+import {isIOS} from 'platform/detection'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import * as Toast from '../util/Toast'
export const snapPoints = ['90%']
export const Component = observer(({}: {}) => {
const store = useStores()
+ const {isMobile} = useWebMediaQueries()
const pal = usePalette('default')
React.useEffect(() => {
@@ -88,9 +90,14 @@ export const Component = observer(({}: {}) => {
-
+
-
+
('')
const pal = usePalette('default')
const theme = useTheme()
@@ -130,7 +131,12 @@ export function Component({
return (
{list ? 'Edit Mute List' : 'New Mute List'}
@@ -226,9 +232,6 @@ export function Component({
}
const styles = StyleSheet.create({
- container: {
- paddingHorizontal: isDesktopWeb ? 0 : 16,
- },
title: {
textAlign: 'center',
fontWeight: 'bold',
diff --git a/src/view/com/modals/DeleteAccount.tsx b/src/view/com/modals/DeleteAccount.tsx
index b4933a1f..98482457 100644
--- a/src/view/com/modals/DeleteAccount.tsx
+++ b/src/view/com/modals/DeleteAccount.tsx
@@ -13,10 +13,10 @@ import {useStores} from 'state/index'
import {s, colors, gradients} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
import {useTheme} from 'lib/ThemeContext'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {cleanError} from 'lib/strings/errors'
import {resetToTab} from '../../../Navigation'
-import {isDesktopWeb} from 'platform/detection'
export const snapPoints = ['60%']
@@ -24,6 +24,7 @@ export function Component({}: {}) {
const pal = usePalette('default')
const theme = useTheme()
const store = useStores()
+ const {isMobile} = useWebMediaQueries()
const [isEmailSent, setIsEmailSent] = React.useState(false)
const [confirmCode, setConfirmCode] = React.useState('')
const [password, setPassword] = React.useState('')
@@ -78,7 +79,7 @@ export function Component({}: {}) {
type="title-xl"
numberOfLines={1}
style={[
- isDesktopWeb ? styles.titleDesktop : styles.titleMobile,
+ isMobile ? styles.titleMobile : styles.titleDesktop,
pal.text,
s.bold,
]}>
diff --git a/src/view/com/modals/EditImage.tsx b/src/view/com/modals/EditImage.tsx
index a4e06b95..e4cfbac3 100644
--- a/src/view/com/modals/EditImage.tsx
+++ b/src/view/com/modals/EditImage.tsx
@@ -7,6 +7,7 @@ import {useTheme} from 'lib/ThemeContext'
import {Text} from '../util/text/Text'
import LinearGradient from 'react-native-linear-gradient'
import {useStores} from 'state/index'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import ImageEditor, {Position} from 'react-avatar-editor'
import {TextInput} from './util'
import {enforceLen} from 'lib/strings/helpers'
@@ -18,7 +19,6 @@ import {Slider} from '@miblanchard/react-native-slider'
import {MaterialIcons} from '@expo/vector-icons'
import {observer} from 'mobx-react-lite'
import {getKeys} from 'lib/type-assertions'
-import {isDesktopWeb} from 'platform/detection'
export const snapPoints = ['80%']
@@ -51,6 +51,7 @@ export const Component = observer(function ({image, gallery}: Props) {
const theme = useTheme()
const store = useStores()
const windowDimensions = useWindowDimensions()
+ const {isMobile} = useWebMediaQueries()
const {
aspectRatio,
@@ -174,19 +175,28 @@ export const Component = observer(function ({image, gallery}: Props) {
const computedWidth =
windowDimensions.width > 500 ? 410 : windowDimensions.width - 80
- const sideLength = isDesktopWeb ? 300 : computedWidth
+ const sideLength = isMobile ? computedWidth : 300
const dimensions = image.getResizedDimensions(aspectRatio, sideLength)
const imgContainerStyles = {width: sideLength, height: sideLength}
const imgControlStyles = {
alignItems: 'center' as const,
- flexDirection: isDesktopWeb ? ('row' as const) : ('column' as const),
- gap: isDesktopWeb ? 5 : 0,
+ flexDirection: isMobile ? ('column' as const) : ('row' as const),
+ gap: isMobile ? 0 : 5,
}
return (
-
+
Edit image
@@ -213,7 +223,7 @@ export const Component = observer(function ({image, gallery}: Props) {
/>
- {isDesktopWeb ? (
+ {!isMobile ? (
Ratios
@@ -248,7 +258,7 @@ export const Component = observer(function ({image, gallery}: Props) {
)
})}
- {isDesktopWeb ? (
+ {!isMobile ? (
Transformations
@@ -282,7 +292,14 @@ export const Component = observer(function ({image, gallery}: Props) {
diff --git a/src/view/com/modals/ModerationDetails.tsx b/src/view/com/modals/ModerationDetails.tsx
index b0e68e61..bd51845c 100644
--- a/src/view/com/modals/ModerationDetails.tsx
+++ b/src/view/com/modals/ModerationDetails.tsx
@@ -2,11 +2,12 @@ import React from 'react'
import {StyleSheet, View} from 'react-native'
import {ModerationUI} from '@atproto/api'
import {useStores} from 'state/index'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {s} from 'lib/styles'
import {Text} from '../util/text/Text'
import {TextLink} from '../util/Link'
import {usePalette} from 'lib/hooks/usePalette'
-import {isDesktopWeb} from 'platform/detection'
+import {isWeb} from 'platform/detection'
import {listUriToHref} from 'lib/strings/url-helpers'
import {Button} from '../util/forms/Button'
@@ -20,6 +21,7 @@ export function Component({
moderation: ModerationUI
}) {
const store = useStores()
+ const {isMobile} = useWebMediaQueries()
const pal = usePalette('default')
let name
@@ -64,7 +66,15 @@ export function Component({
}
return (
-
+
{name}
@@ -87,7 +97,6 @@ export function Component({
const styles = StyleSheet.create({
container: {
flex: 1,
- paddingHorizontal: isDesktopWeb ? 0 : 14,
},
title: {
textAlign: 'center',
@@ -99,7 +108,7 @@ const styles = StyleSheet.create({
},
btn: {
paddingVertical: 14,
- marginTop: isDesktopWeb ? 40 : 0,
- marginBottom: isDesktopWeb ? 0 : 40,
+ marginTop: isWeb ? 40 : 0,
+ marginBottom: isWeb ? 0 : 40,
},
})
diff --git a/src/view/com/modals/SelfLabel.tsx b/src/view/com/modals/SelfLabel.tsx
index 42863fd3..820f2895 100644
--- a/src/view/com/modals/SelfLabel.tsx
+++ b/src/view/com/modals/SelfLabel.tsx
@@ -5,7 +5,8 @@ import {Text} from '../util/text/Text'
import {useStores} from 'state/index'
import {s, colors} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
-import {isDesktopWeb} from 'platform/detection'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {isWeb} from 'platform/detection'
import {Button} from '../util/forms/Button'
import {SelectableBtn} from '../util/forms/SelectableBtn'
import {ScrollView} from 'view/com/modals/util'
@@ -25,6 +26,7 @@ export const Component = observer(function Component({
}) {
const pal = usePalette('default')
const store = useStores()
+ const {isMobile} = useWebMediaQueries()
const [selected, setSelected] = useState(labels)
const toggleAdultLabel = (label: string) => {
@@ -54,7 +56,12 @@ export const Component = observer(function Component({
-
+
{
const pal = usePalette('default')
+ const {isMobile} = useWebMediaQueries()
return (
-
+
{
store.shell.closeModal()
}, [store])
@@ -47,7 +49,19 @@ export function Component({}: {}) {
)
return (
-
+
Content Languages
Which languages would you like to see in your algorithmic feeds?
@@ -67,7 +81,11 @@ export function Component({}: {}) {
}}
/>
))}
-
+
@@ -77,7 +95,6 @@ export function Component({}: {}) {
const styles = StyleSheet.create({
container: {
flex: 1,
- paddingTop: 20,
},
title: {
textAlign: 'center',
@@ -94,7 +111,4 @@ const styles = StyleSheet.create({
flex: 1,
paddingHorizontal: 10,
},
- bottomSpacer: {
- height: isDesktopWeb ? 0 : 60,
- },
})
diff --git a/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx b/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx
index 0f336e7b..c80f8731 100644
--- a/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx
+++ b/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx
@@ -5,7 +5,8 @@ import {ScrollView} from '../util'
import {useStores} from 'state/index'
import {Text} from '../../util/text/Text'
import {usePalette} from 'lib/hooks/usePalette'
-import {isDesktopWeb, deviceLocales} from 'platform/detection'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {deviceLocales} from 'platform/detection'
import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages'
import {ConfirmLanguagesButton} from './ConfirmLanguagesButton'
import {ToggleButton} from 'view/com/util/forms/ToggleButton'
@@ -15,6 +16,7 @@ export const snapPoints = ['100%']
export const Component = observer(() => {
const store = useStores()
const pal = usePalette('default')
+ const {isMobile} = useWebMediaQueries()
const onPressDone = React.useCallback(() => {
store.shell.closeModal()
}, [store])
@@ -48,7 +50,19 @@ export const Component = observer(() => {
)
return (
-
+
Post Languages
Which languages are used in this post?
@@ -80,7 +94,11 @@ export const Component = observer(() => {
/>
)
})}
-
+
@@ -90,7 +108,6 @@ export const Component = observer(() => {
const styles = StyleSheet.create({
container: {
flex: 1,
- paddingTop: 20,
},
title: {
textAlign: 'center',
@@ -107,9 +124,6 @@ const styles = StyleSheet.create({
flex: 1,
paddingHorizontal: 10,
},
- bottomSpacer: {
- height: isDesktopWeb ? 0 : 60,
- },
languageToggle: {
borderTopWidth: 1,
borderRadius: 0,
diff --git a/src/view/com/modals/report/InputIssueDetails.tsx b/src/view/com/modals/report/InputIssueDetails.tsx
index a2e5069a..70a8f7b2 100644
--- a/src/view/com/modals/report/InputIssueDetails.tsx
+++ b/src/view/com/modals/report/InputIssueDetails.tsx
@@ -5,9 +5,9 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {CharProgress} from '../../composer/char-progress/CharProgress'
import {Text} from '../../util/text/Text'
import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {s} from 'lib/styles'
import {SendReportButton} from './SendReportButton'
-import {isDesktopWeb} from 'platform/detection'
export function InputIssueDetails({
details,
@@ -23,9 +23,13 @@ export function InputIssueDetails({
isProcessing: boolean
}) {
const pal = usePalette('default')
+ const {isMobile} = useWebMediaQueries()
return (
-
+
()
@@ -87,7 +89,13 @@ export function Component(content: ReportComponentProps) {
return (
-
+
{showDetailsInput ? (
What is the issue with this {collectionName}?
-
- {error ? (
-
-
-
- ) : undefined}
+
+
+
+ {error ? : undefined}
{/* If no atUri is present, the report would be for account in which case, we allow sending without specifying a reason */}
{issue || !atUri ? (
<>
@@ -188,7 +194,6 @@ const SelectIssue = ({
const styles = StyleSheet.create({
container: {
paddingHorizontal: 10,
- paddingBottom: 40,
},
title: {
textAlign: 'center',
diff --git a/src/view/com/pager/FeedsTabBar.web.tsx b/src/view/com/pager/FeedsTabBar.web.tsx
index 0df91595..6e94ab60 100644
--- a/src/view/com/pager/FeedsTabBar.web.tsx
+++ b/src/view/com/pager/FeedsTabBar.web.tsx
@@ -13,8 +13,8 @@ export const FeedsTabBar = observer(
(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
) => {
- const {isDesktop} = useWebMediaQueries()
- if (!isDesktop) {
+ const {isMobile} = useWebMediaQueries()
+ if (isMobile) {
return
} else {
return
diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index d454e89f..319d28f9 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -3,7 +3,8 @@ import {StyleSheet, View, ScrollView, LayoutChangeEvent} from 'react-native'
import {Text} from '../util/text/Text'
import {PressableWithHover} from '../util/PressableWithHover'
import {usePalette} from 'lib/hooks/usePalette'
-import {isDesktopWeb, isMobileWeb} from 'platform/detection'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {isWeb} from 'platform/detection'
import {DraggableScrollView} from './DraggableScrollView'
export interface TabBarProps {
@@ -30,6 +31,7 @@ export function TabBar({
() => ({borderBottomColor: indicatorColor || pal.colors.link}),
[indicatorColor, pal],
)
+ const {isDesktop, isTablet} = useWebMediaQueries()
// scrolls to the selected item when the page changes
useEffect(() => {
@@ -61,6 +63,7 @@ export function TabBar({
[],
)
+ const styles = isDesktop || isTablet ? desktopStyles : mobileStyles
return (
onPressItem(i)}>
{item}
@@ -91,46 +94,46 @@ export function TabBar({
)
}
-const styles = isDesktopWeb
- ? StyleSheet.create({
- outer: {
- flexDirection: 'row',
- width: 598,
- },
- contentContainer: {
- columnGap: 8,
- marginLeft: 14,
- paddingRight: 14,
- backgroundColor: 'transparent',
- },
- item: {
- paddingTop: 14,
- paddingBottom: 12,
- paddingHorizontal: 10,
- borderBottomWidth: 3,
- borderBottomColor: 'transparent',
- justifyContent: 'center',
- },
- })
- : StyleSheet.create({
- outer: {
- flex: 1,
- flexDirection: 'row',
- backgroundColor: 'transparent',
- maxWidth: '100%',
- },
- contentContainer: {
- columnGap: isMobileWeb ? 0 : 20,
- marginLeft: isMobileWeb ? 0 : 18,
- paddingRight: isMobileWeb ? 0 : 36,
- backgroundColor: 'transparent',
- },
- item: {
- paddingTop: 10,
- paddingBottom: 10,
- paddingHorizontal: isMobileWeb ? 8 : 0,
- borderBottomWidth: 3,
- borderBottomColor: 'transparent',
- justifyContent: 'center',
- },
- })
+const desktopStyles = StyleSheet.create({
+ outer: {
+ flexDirection: 'row',
+ width: 598,
+ },
+ contentContainer: {
+ columnGap: 8,
+ marginLeft: 14,
+ paddingRight: 14,
+ backgroundColor: 'transparent',
+ },
+ item: {
+ paddingTop: 14,
+ paddingBottom: 12,
+ paddingHorizontal: 10,
+ borderBottomWidth: 3,
+ borderBottomColor: 'transparent',
+ justifyContent: 'center',
+ },
+})
+
+const mobileStyles = StyleSheet.create({
+ outer: {
+ flex: 1,
+ flexDirection: 'row',
+ backgroundColor: 'transparent',
+ maxWidth: '100%',
+ },
+ contentContainer: {
+ columnGap: isWeb ? 0 : 20,
+ marginLeft: isWeb ? 0 : 18,
+ paddingRight: isWeb ? 0 : 36,
+ backgroundColor: 'transparent',
+ },
+ item: {
+ paddingTop: 10,
+ paddingBottom: 10,
+ paddingHorizontal: isWeb ? 8 : 0,
+ borderBottomWidth: 3,
+ borderBottomColor: 'transparent',
+ justifyContent: 'center',
+ },
+})
diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx
index 3e951dbf..f7766dfb 100644
--- a/src/view/com/post-thread/PostThread.tsx
+++ b/src/view/com/post-thread/PostThread.tsx
@@ -18,18 +18,24 @@ import {
} from '@fortawesome/react-native-fontawesome'
import {PostThreadItem} from './PostThreadItem'
import {ComposePrompt} from '../composer/Prompt'
+import {ViewHeader} from '../util/ViewHeader'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {Text} from '../util/text/Text'
import {s} from 'lib/styles'
-import {isIOS, isDesktopWeb, isMobileWeb} from 'platform/detection'
+import {isIOS, isDesktopWeb} from 'platform/detection'
import {usePalette} from 'lib/hooks/usePalette'
import {useSetTitle} from 'lib/hooks/useSetTitle'
import {useNavigation} from '@react-navigation/native'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {NavigationProp} from 'lib/routes/types'
import {sanitizeDisplayName} from 'lib/strings/display-names'
const MAINTAIN_VISIBLE_CONTENT_POSITION = {minIndexForVisible: 0}
+const TOP_COMPONENT = {
+ _reactKey: '__top_component__',
+ _isHighlightedPost: false,
+}
const PARENT_SPINNER = {
_reactKey: '__parent_spinner__',
_isHighlightedPost: false,
@@ -47,6 +53,7 @@ const BOTTOM_COMPONENT = {
}
type YieldedItem =
| PostThreadItemModel
+ | typeof TOP_COMPONENT
| typeof PARENT_SPINNER
| typeof REPLY_PROMPT
| typeof DELETED
@@ -63,13 +70,14 @@ export const PostThread = observer(function PostThread({
onPressReply: () => void
}) {
const pal = usePalette('default')
+ const {isTablet} = useWebMediaQueries()
const ref = useRef(null)
const hasScrolledIntoView = useRef(false)
const [isRefreshing, setIsRefreshing] = React.useState(false)
const navigation = useNavigation()
const posts = React.useMemo(() => {
if (view.thread) {
- const arr = Array.from(flattenThread(view.thread))
+ const arr = [TOP_COMPONENT].concat(Array.from(flattenThread(view.thread)))
if (view.isLoadingFromCache) {
if (view.thread?.postRecord?.reply) {
arr.unshift(PARENT_SPINNER)
@@ -158,7 +166,9 @@ export const PostThread = observer(function PostThread({
const renderItem = React.useCallback(
({item, index}: {item: YieldedItem; index: number}) => {
- if (item === PARENT_SPINNER) {
+ if (item === TOP_COMPONENT) {
+ return isTablet ? : null
+ } else if (item === PARENT_SPINNER) {
return (
@@ -186,19 +196,8 @@ export const PostThread = observer(function PostThread({
// HACK
// due to some complexities with how flatlist works, this is the easiest way
// I could find to get a border positioned directly under the last item
- // -
- // addendum -- it's also the best way to get mobile web to add padding
- // at the bottom of the thread since paddingbottom is ignored. yikes.
// -prf
- return (
-
- )
+ return
} else if (item === CHILD_SPINNER) {
return (
@@ -219,7 +218,7 @@ export const PostThread = observer(function PostThread({
}
return <>
},
- [onRefresh, onPressReply, pal, posts],
+ [onRefresh, onPressReply, pal, posts, isTablet],
)
// loading
@@ -331,7 +330,6 @@ export const PostThread = observer(function PostThread({
}
onScrollToIndexFailed={onScrollToIndexFailed}
style={s.hContentRegion}
- contentContainerStyle={styles.contentContainerExtra}
/>
)
})
@@ -384,13 +382,8 @@ const styles = StyleSheet.create({
paddingVertical: 10,
},
childSpinner: {},
- bottomBorder: {
- borderBottomWidth: 1,
- },
bottomSpacer: {
height: 400,
- },
- contentContainerExtra: {
- paddingBottom: 500,
+ borderTopWidth: 1,
},
})
diff --git a/src/view/com/posts/MultiFeed.tsx b/src/view/com/posts/MultiFeed.tsx
index 97899e55..9c8f4f24 100644
--- a/src/view/com/posts/MultiFeed.tsx
+++ b/src/view/com/posts/MultiFeed.tsx
@@ -22,7 +22,7 @@ import {s} from 'lib/styles'
import {useAnalytics} from 'lib/analytics/analytics'
import {usePalette} from 'lib/hooks/usePalette'
import {useTheme} from 'lib/ThemeContext'
-import {isDesktopWeb} from 'platform/detection'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {CogIcon} from 'lib/icons'
export const MultiFeed = observer(function Feed({
@@ -48,6 +48,7 @@ export const MultiFeed = observer(function Feed({
}) {
const pal = usePalette('default')
const theme = useTheme()
+ const {isMobile} = useWebMediaQueries()
const {track} = useAnalytics()
const [isRefreshing, setIsRefreshing] = React.useState(false)
@@ -80,19 +81,27 @@ export const MultiFeed = observer(function Feed({
const renderItem = React.useCallback(
({item}: {item: MultiFeedItem}) => {
if (item.type === 'header') {
- if (isDesktopWeb) {
+ if (!isMobile) {
return (
-
-
- My Feeds
-
-
-
-
-
+ <>
+
+
+ My Feeds
+
+
+
+
+
+
+
)
}
- return
+ return (
+ <>
+
+
+
+ )
} else if (item.type === 'feed-header') {
return (
@@ -124,18 +133,11 @@ export const MultiFeed = observer(function Feed({
)
} else if (item.type === 'footer') {
- return (
-
-
-
- Discover new feeds
-
-
- )
+ return
}
return null
},
- [pal],
+ [pal, isMobile],
)
const ListFooter = React.useCallback(
@@ -150,17 +152,6 @@ export const MultiFeed = observer(function Feed({
[multifeed.isLoading, isRefreshing, pal],
)
- const ListHeader = React.useCallback(() => {
- return (
-
-
-
- Discover new feeds
-
-
- )
- }, [pal])
-
return (
{multifeed.items.length > 0 && (
@@ -171,7 +162,6 @@ export const MultiFeed = observer(function Feed({
keyExtractor={item => item._reactKey}
renderItem={renderItem}
ListFooterComponent={ListFooter}
- ListHeaderComponent={ListHeader}
refreshControl={
+
+
+ Discover new feeds
+
+
+ )
+}
+
const styles = StyleSheet.create({
container: {
height: '100%',
@@ -237,7 +239,7 @@ const styles = StyleSheet.create({
borderTopWidth: 1,
borderBottomWidth: 1,
},
- footerLink: {
+ discoverLink: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index dd3fb530..8786fd0b 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -27,8 +27,9 @@ import {UserBanner} from '../util/UserBanner'
import {ProfileHeaderAlerts} from '../util/moderation/ProfileHeaderAlerts'
import {usePalette} from 'lib/hooks/usePalette'
import {useAnalytics} from 'lib/analytics/analytics'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {NavigationProp} from 'lib/routes/types'
-import {isDesktopWeb, isNative} from 'platform/detection'
+import {isNative} from 'platform/detection'
import {FollowState} from 'state/models/cache/my-follows'
import {shareUrl} from 'lib/sharing'
import {formatCount} from '../util/numeric/format'
@@ -108,6 +109,7 @@ const ProfileHeaderLoaded = observer(
const navigation = useNavigation()
const {track} = useAnalytics()
const invalidHandle = isInvalidHandle(view.handle)
+ const {isDesktop} = useWebMediaQueries()
const onPressBack = React.useCallback(() => {
navigation.goBack()
@@ -510,7 +512,7 @@ const ProfileHeaderLoaded = observer(
)}
- {!isDesktopWeb && !hideBackButton && (
+ {!isDesktop && !hideBackButton && (
(null)
+ const {isMobile} = useWebMediaQueries()
const onPressMenu = React.useCallback(() => {
track('ViewHeader:MenuButtonClicked')
@@ -49,8 +51,14 @@ export function HeaderWithInput({
}, [onPressCancelSearch, textInput])
return (
-
- {showMenu ? (
+
+ {showMenu && isMobile ? (
setIsInputFocused(false)}
onChangeText={onChangeQuery}
onSubmitEditing={onSubmitQuery}
- autoFocus={true}
+ autoFocus={isMobile}
accessibilityRole="search"
accessibilityLabel="Search"
accessibilityHint=""
@@ -127,6 +135,11 @@ const styles = StyleSheet.create({
paddingHorizontal: 12,
paddingVertical: 4,
},
+ headerDesktop: {
+ borderWidth: 1,
+ borderTopWidth: 0,
+ paddingVertical: 10,
+ },
headerMenuBtn: {
width: 30,
height: 30,
diff --git a/src/view/com/search/SearchResults.tsx b/src/view/com/search/SearchResults.tsx
index 98427770..e74a8cfe 100644
--- a/src/view/com/search/SearchResults.tsx
+++ b/src/view/com/search/SearchResults.tsx
@@ -13,13 +13,14 @@ import {
} from 'view/com/util/LoadingPlaceholder'
import {Text} from 'view/com/util/text/Text'
import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {s} from 'lib/styles'
-import {isDesktopWeb} from 'platform/detection'
const SECTIONS = ['Posts', 'Users']
export const SearchResults = observer(({model}: {model: SearchUIModel}) => {
const pal = usePalette('default')
+ const {isMobile} = useWebMediaQueries()
const renderTabBar = React.useCallback(
(props: RenderTabBarFnProps) => {
@@ -39,10 +40,16 @@ export const SearchResults = observer(({model}: {model: SearchUIModel}) => {
return (
-
+
-
+
@@ -128,7 +135,4 @@ const styles = StyleSheet.create({
paddingHorizontal: 14,
paddingVertical: 16,
},
- results: {
- paddingTop: isDesktopWeb ? 50 : 42,
- },
})
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index 7482db8e..91cdb08c 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -8,9 +8,9 @@ import {Text} from './text/Text'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {useAnalytics} from 'lib/analytics/analytics'
import {NavigationProp} from 'lib/routes/types'
-import {isDesktopWeb} from 'platform/detection'
const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
@@ -35,6 +35,7 @@ export const ViewHeader = observer(function ({
const store = useStores()
const navigation = useNavigation()
const {track} = useAnalytics()
+ const {isDesktop, isTablet} = useWebMediaQueries()
const onPressBack = React.useCallback(() => {
if (navigation.canGoBack()) {
@@ -49,7 +50,7 @@ export const ViewHeader = observer(function ({
store.shell.openDrawer()
}, [track, store])
- if (isDesktopWeb) {
+ if (isDesktop) {
if (showOnDesktop) {
return (
- ) : (
+ ) : !isTablet ? (
- )}
+ ) : null}
) : null}
@@ -122,6 +123,7 @@ function DesktopWebHeader({
@@ -208,6 +211,12 @@ const styles = StyleSheet.create({
alignItems: 'center',
paddingHorizontal: 12,
paddingVertical: 6,
+ width: '100%',
+ },
+ headerFixed: {
+ maxWidth: 600,
+ marginLeft: 'auto',
+ marginRight: 'auto',
},
headerFloating: {
position: 'absolute',
diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx
index 3313492e..58a367f2 100644
--- a/src/view/com/util/Views.web.tsx
+++ b/src/view/com/util/Views.web.tsx
@@ -24,6 +24,7 @@ import {
} from 'react-native'
import {addStyle} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
interface AddedProps {
desktopFixedHeight?: boolean
@@ -48,6 +49,7 @@ export const FlatList = React.forwardRef(function (
ref: React.Ref,
) {
const pal = usePalette('default')
+ const {isMobile} = useWebMediaQueries()
contentContainerStyle = addStyle(
contentContainerStyle,
styles.containerScroll,
@@ -67,6 +69,12 @@ export const FlatList = React.forwardRef(function (
}
if (desktopFixedHeight) {
style = addStyle(style, styles.fixedHeight)
+ if (!isMobile) {
+ contentContainerStyle = addStyle(
+ contentContainerStyle,
+ styles.stableGutters,
+ )
+ }
}
return (
{
@@ -14,6 +15,7 @@ export interface FABProps
}
export const FABInner = observer(({testID, icon, ...props}: FABProps) => {
+ const {isTablet} = useWebMediaQueries()
const store = useStores()
const interp = useAnimatedValue(0)
React.useEffect(() => {
@@ -24,18 +26,33 @@ export const FABInner = observer(({testID, icon, ...props}: FABProps) => {
isInteraction: false,
}).start()
}, [interp, store.shell.minimalShellMode])
- const transform = {
- transform: [{translateY: Animated.multiply(interp, 60)}],
- }
+ const transform = isTablet
+ ? undefined
+ : {
+ transform: [{translateY: Animated.multiply(interp, 60)}],
+ }
+ const size = isTablet ? styles.sizeLarge : styles.sizeRegular
return (
+ style={[
+ styles.outer,
+ size,
+ isWeb && isTablet
+ ? {
+ right: 50,
+ bottom: 50,
+ }
+ : {
+ bottom: 114,
+ },
+ transform,
+ ]}>
+ style={[styles.inner, size]}>
{icon}
@@ -44,22 +61,23 @@ export const FABInner = observer(({testID, icon, ...props}: FABProps) => {
})
const styles = StyleSheet.create({
+ sizeRegular: {
+ width: 60,
+ height: 60,
+ borderRadius: 30,
+ },
+ sizeLarge: {
+ width: 70,
+ height: 70,
+ borderRadius: 35,
+ },
outer: {
position: 'absolute',
zIndex: 1,
right: 24,
bottom: 94,
- width: 60,
- height: 60,
- borderRadius: 30,
- },
- mobileWebOuter: {
- bottom: 114,
},
inner: {
- width: 60,
- height: 60,
- borderRadius: 30,
justifyContent: 'center',
alignItems: 'center',
},
diff --git a/src/view/com/util/forms/SelectableBtn.tsx b/src/view/com/util/forms/SelectableBtn.tsx
index 4b494264..f09d063a 100644
--- a/src/view/com/util/forms/SelectableBtn.tsx
+++ b/src/view/com/util/forms/SelectableBtn.tsx
@@ -2,7 +2,7 @@ import React from 'react'
import {Pressable, ViewStyle, StyleProp, StyleSheet} from 'react-native'
import {Text} from '../text/Text'
import {usePalette} from 'lib/hooks/usePalette'
-import {isDesktopWeb} from 'platform/detection'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
interface SelectableBtnProps {
testID?: string
@@ -28,12 +28,16 @@ export function SelectableBtn({
const pal = usePalette('default')
const palPrimary = usePalette('inverted')
const needsWidthStyles = !style || !('width' in style || 'flex' in style)
+ const {isMobile} = useWebMediaQueries()
return (
) => (
- {children}
+ {children}
)
export const TabletOrDesktop = ({children}: React.PropsWithChildren<{}>) => (
{children}
)
export const Tablet = ({children}: React.PropsWithChildren<{}>) => (
-
+
{children}
)
export const TabletOrMobile = ({children}: React.PropsWithChildren<{}>) => (
- {children}
+ {children}
)
export const Mobile = ({children}: React.PropsWithChildren<{}>) => (
{children}
diff --git a/src/view/com/util/load-latest/LoadLatestBtn.web.tsx b/src/view/com/util/load-latest/LoadLatestBtn.web.tsx
index c90e5dfb..c9576e56 100644
--- a/src/view/com/util/load-latest/LoadLatestBtn.web.tsx
+++ b/src/view/com/util/load-latest/LoadLatestBtn.web.tsx
@@ -3,8 +3,8 @@ import {StyleSheet, TouchableOpacity} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Text} from '../text/Text'
import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {LoadLatestBtn as LoadLatestBtnMobile} from './LoadLatestBtnMobile'
-import {isMobileWeb} from 'platform/detection'
import {HITSLOP_20} from 'lib/constants'
export const LoadLatestBtn = ({
@@ -19,7 +19,8 @@ export const LoadLatestBtn = ({
minimalShellMode?: boolean
}) => {
const pal = usePalette('default')
- if (isMobileWeb) {
+ const {isMobile} = useWebMediaQueries()
+ if (isMobile) {
return (
) {
const store = useStores()
const pal = usePalette('default')
+ const {isMobile} = useWebMediaQueries()
const [override, setOverride] = React.useState(false)
if (!moderation.blur || (ignoreMute && moderation.cause?.type === 'muted')) {
@@ -54,6 +55,7 @@ export function ContentHider({
accessibilityLabel=""
style={[
styles.cover,
+ {paddingRight: isMobile ? 22 : 18},
moderation.noOverride
? {borderWidth: 1, borderColor: pal.colors.borderDark}
: pal.viewLight,
@@ -96,7 +98,6 @@ const styles = StyleSheet.create({
marginTop: 4,
paddingVertical: 14,
paddingLeft: 14,
- paddingRight: isDesktopWeb ? 18 : 22,
},
showBtn: {
marginLeft: 'auto',
diff --git a/src/view/com/util/moderation/PostHider.tsx b/src/view/com/util/moderation/PostHider.tsx
index 2a52561d..443885df 100644
--- a/src/view/com/util/moderation/PostHider.tsx
+++ b/src/view/com/util/moderation/PostHider.tsx
@@ -2,13 +2,13 @@ import React, {ComponentProps} from 'react'
import {StyleSheet, Pressable, View} from 'react-native'
import {ModerationUI} from '@atproto/api'
import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {Link} from '../Link'
import {Text} from '../text/Text'
import {addStyle} from 'lib/styles'
import {describeModerationCause} from 'lib/moderation'
import {ShieldExclamation} from 'lib/icons'
import {useStores} from 'state/index'
-import {isDesktopWeb} from 'platform/detection'
interface Props extends ComponentProps {
// testID?: string
@@ -27,6 +27,7 @@ export function PostHider({
}: Props) {
const store = useStores()
const pal = usePalette('default')
+ const {isMobile} = useWebMediaQueries()
const [override, setOverride] = React.useState(false)
if (!moderation.blur) {
@@ -55,7 +56,11 @@ export function PostHider({
accessibilityRole="button"
accessibilityHint={override ? 'Hide the content' : 'Show the content'}
accessibilityLabel=""
- style={[styles.description, pal.viewLight]}>
+ style={[
+ styles.description,
+ {paddingRight: isMobile ? 22 : 18},
+ pal.viewLight,
+ ]}>
{
store.shell.openModal({
@@ -100,7 +105,6 @@ const styles = StyleSheet.create({
gap: 4,
paddingVertical: 14,
paddingLeft: 18,
- paddingRight: isDesktopWeb ? 18 : 22,
marginTop: 1,
},
showBtn: {
diff --git a/src/view/com/util/moderation/ScreenHider.tsx b/src/view/com/util/moderation/ScreenHider.tsx
index b76b1101..0224b9fe 100644
--- a/src/view/com/util/moderation/ScreenHider.tsx
+++ b/src/view/com/util/moderation/ScreenHider.tsx
@@ -13,10 +13,10 @@ import {
import {useNavigation} from '@react-navigation/native'
import {ModerationUI} from '@atproto/api'
import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {NavigationProp} from 'lib/routes/types'
import {Text} from '../text/Text'
import {Button} from '../forms/Button'
-import {isDesktopWeb} from 'platform/detection'
import {describeModerationCause} from 'lib/moderation'
import {useStores} from 'state/index'
@@ -39,6 +39,7 @@ export function ScreenHider({
const palInverted = usePalette('inverted')
const [override, setOverride] = React.useState(false)
const navigation = useNavigation()
+ const {isMobile} = useWebMediaQueries()
if (!moderation.blur || override) {
return (
@@ -85,7 +86,7 @@ export function ScreenHider({
- {!isDesktopWeb && }
+ {isMobile && }