diff --git a/src/components/ProgressGuide/List.tsx b/src/components/ProgressGuide/List.tsx index 5bd55de8d3..81abc586f3 100644 --- a/src/components/ProgressGuide/List.tsx +++ b/src/components/ProgressGuide/List.tsx @@ -9,7 +9,7 @@ import { useProgressGuideControls, } from '#/state/shell/progress-guide' import {UserAvatar} from '#/view/com/util/UserAvatar' -import {atoms as a, useLayoutBreakpoints, useTheme} from '#/alf' +import {atoms as a, useBreakpoints, useLayoutBreakpoints, useTheme} from '#/alf' import {Button, ButtonIcon} from '#/components/Button' import {Person_Stroke2_Corner2_Rounded as PersonIcon} from '#/components/icons/Person' import {TimesLarge_Stroke2_Corner0_Rounded as Times} from '#/components/icons/Times' @@ -23,6 +23,8 @@ const TOTAL_AVATARS = 10 export function ProgressGuideList({style}: {style?: StyleProp}) { const t = useTheme() const {_} = useLingui() + const {gtPhone} = useBreakpoints() + const {rightNavVisible} = useLayoutBreakpoints() const {currentAccount} = useSession() const followProgressGuide = useProgressGuide('follow-10') const followAndLikeProgressGuide = useProgressGuide('like-10-and-follow-7') @@ -39,6 +41,9 @@ export function ProgressGuideList({style}: {style?: StyleProp}) { return null } + // Inline layout when left nav visible but no right sidebar (800-1100px) + const inlineLayout = gtPhone && !rightNavVisible + if (guide) { return ( }) { {guide.guide === 'follow-10' && ( - <> + - - + + )} {guide.guide === 'like-10-and-follow-7' && ( <>