diff --git a/packages/desktop-client/src/components/FinancesApp.tsx b/packages/desktop-client/src/components/FinancesApp.tsx index 26f3852e41b..bdf694cda34 100644 --- a/packages/desktop-client/src/components/FinancesApp.tsx +++ b/packages/desktop-client/src/components/FinancesApp.tsx @@ -53,24 +53,41 @@ function NarrowNotSupported({ children: ReactElement; }) { const { isNarrowWidth } = useResponsive(); + const { isExtraSmallWidth } = useResponsive(); + let isWidth = false; + + if (isNarrowWidth || isExtraSmallWidth) { + isWidth = true; + } else { + isWidth = false; + } + const navigate = useNavigate(); useEffect(() => { - if (isNarrowWidth) { + if (isWidth) { navigate(redirectTo); } - }, [isNarrowWidth, navigate, redirectTo]); - return isNarrowWidth ? null : children; + }, [isWidth, navigate, redirectTo]); + return isWidth ? null : children; } function WideNotSupported({ children, redirectTo = '/budget' }) { const { isNarrowWidth } = useResponsive(); + const { isExtraSmallWidth } = useResponsive(); + let isWidth = false; + + if (isNarrowWidth || isExtraSmallWidth) { + isWidth = true; + } else { + isWidth = false; + } const navigate = useNavigate(); useEffect(() => { - if (!isNarrowWidth) { + if (!isWidth) { navigate(redirectTo); } - }, [isNarrowWidth, navigate, redirectTo]); - return isNarrowWidth ? children : null; + }, [isWidth, navigate, redirectTo]); + return isWidth ? children : null; } function NavTab({ icon: TabIcon, name, path }) { @@ -93,6 +110,14 @@ function NavTab({ icon: TabIcon, name, path }) { function MobileNavTabs() { const { isNarrowWidth } = useResponsive(); + const { isExtraSmallWidth } = useResponsive(); + let isWidth = false; + + if (isNarrowWidth || isExtraSmallWidth) { + isWidth = true; + } else { + isWidth = false; + } return (