Popover hidden on smaller devices -Next App Router

[ghost]

Description

On smaller devices, specifically, if a device has a width below roughly 360px or below, the popover becomes hidden if it's not small enough.

I'm using the new App Router in NextJS for added context.

Device Info

• Device: I-Phone 5/SE IOS 10.3.1

Screenshot of Issue

Code for Tour Provider

"use client";

// Next Imports
import { useRouter } from "next/navigation";
// React
import React, { useState } from "react";
// MUI hook
import { useMediaQuery } from "@mui/material";

// React Tour
import { TourProvider } from "@reactour/tour";
// Auth
import { useSession } from "next-auth/react";
// Context
import { useUserAppTourContext } from "../../contexts/userAppTourContext";

export default function UserAppTour({ children, mobileOpen, setMobileOpen }) {
    // React Tour config
    const [step, setStep] = useState(0);
    // Test if the device is a mobile
    const isMobile = useMediaQuery("(max-width:1280px)");

    // Tour Steps
    const reactTourSteps = [
        // Step 0 -/
        {
            selector: isMobile
                ? "[data-tour='home_page_mobile_link']"
                : "[data-tour='home_page_link']",
            content: "Click the home button to return to the home page.",
        },
        // Step 1
        {
            selector: "[data-tour='enter_reg_banner']",
            content:
                "Search for your vehicle by clicking ENTER REG. You will then be directed to enter the vehicle's registration number.",
        },
        // Step 2 - /vrm
        {
            selector: "[data-tour='vehicle_registration_input']",
            content:
                "Enter your vehicle registration in the ENTER REG input. After entering your registration, either press enter on your keyboard or click the submit button.",
        },
        // Step 3 - /
        {
            selector: "[data-tour='search_box']",
            content:
                "Once your vehicle has been selected, you can search for a part by using the search bar.",
            styles: isMobile
                ? {
                      popover: (base) => ({
                          ...base,
                          "--reactour-accent": "#ef5a3d",
                          borderRadius: borderRadius,
                          marginRight: "2rem",
                      }),
                      maskArea: (base) => ({ ...base, rx: borderRadius }),
                  }
                : {
                      popover: (base) => ({
                          ...base,
                          "--reactour-accent": "#ef5a3d",
                          borderRadius: borderRadius,
                          marginRight: "2rem",
                      }),
                      maskArea: (base) => ({ ...base, rx: borderRadius }),
                  },
        },
        // Step 4
        {
            selector: "[data-tour='service_kit_banner']",
            content:
                "Click the service kit banner to quickly generate a service kit for your selected vehicle.",
        },
        // Step 5
        {
            selector: "[data-tour='brake_kit_banner']",
            content:
                "Click the brake kit banner to quickly generate a brake kit for your selected vehicle.",
        },
        // Step 6
        {
            selector: "[data-tour='popular_categories_section']",
            content:
                "You can also select a part by using our FEATURED part section. If you want to view all of our categories, click the ALL CATEGORIES button.",
        },
        // Step 7 - /parts/Air%2520Filter
        {
            selector: "[data-tour='part_item_selection']",
            content:
                "We offer a range of prices for different brands or parts. Choose whichever brand you prefer.",
        },
        // Step 8
        {
            selector: "[data-tour='part_filter_button']",
            content:
                "Click the filter button to open up a menu where you can filter the parts by brand or quality.",
        },
        // Step 9
        {
            selector: "[data-tour='part_basket_button']",
            content:
                "Once you've selected your part, click the ADD TO BASKET button to add it to your basket.",
        },
        // Step 10 - /
        {
            selector: "[data-tour='vrm_page_link']",
            content:
                "Click the vehicle button to view your vehicle history or find a new vehicle.",
        },
        // Step 11 - /
        {
            selector: isMobile
                ? "[data-tour='order_page_mobile_link']"
                : "[data-tour='order_page_link']",
            content:
                "Click the orders button to view your previous orders. You can search by document number or date range for all orders/credits.",
        },
        // Step 12
        {
            selector: isMobile
                ? "[data-tour='basket_page_mobile_link']"
                : "[data-tour='basket_page_link']",
            content:
                "Click the basket button to view your basket. Here you can amend items already added to the basket or search new items.",
        },
        // Step 13
        {
            selector: "[data-tour='feedback_page_link']",
            content:
                "Click the feedback button to view the feedback page. Here you can let us know your thoughts on the app experience.",
        },
        // Step 14
        {
            selector: "[data-tour='account_page_link']",
            content:
                "Click the account button to view your account page. Here you can view your account details and change your password etc.",
        },
        // Step 15
        {
            selector: "[data-tour='settings_page_link']",
            content:
                "Click the settings button to view the settings page. Here you can change various app settings like, whether to view line codes and toggle VAT on or off.",
        },
        // Step 16
        {
            selector: "[data-tour='sign_out_link']",
            content: "Click the sign out button to sign out of the app.",
        },
    ];

    // Context
    const { turnUserAppIntroOff } = useUserAppTourContext();

    // Set up router
    const router = useRouter();

    // Set up translation state
    const [translateX, setTranslateX] = useState(false);
    const [translateY, setTranslateY] = useState(false);

    const setCurrentStep = (step) => {
        // You need to add route changes before and after route changes
        // This is to allow users to go back and forth between pages
        switch (step) {
            case 0:
                router.push("/");
                turnUserAppIntroOff();
                break;
            case 1:
                router.push("/");
                break;
            case 2:
                router.push("/vrm");
                break;
            case 3:
                router.push("/");
                break;
            case 4:
                break;
            case 6:
                router.push("/");
                break;
            case 7:
                router.push("/parts/Air%2520Filter");
                break;
            case 9:
                router.push("/parts/Air%2520Filter");
                break;
            case 10:
                if (isMobile) {
                    router.push("/vrm");
                    setMobileOpen(!mobileOpen);
                }
                router.push("/");
                break;
            default:
                break;
        }
        setStep(step);
    };

    // Return a fragment if there is no current user
    const { data: session } = useSession();
    const isLoggedIn = session?.user;
    const appTourEnabled = session?.user?.hasUserTourEnabled;

    // TODO: add appTourEnabled check back
    if (!isLoggedIn) {
        return <>{children}</>;
    }

    // Styling
    const borderRadius = 10;

    return (
        <TourProvider
            className="w-72 sm:w-full ml-8 my-4"
            currentStep={step}
            showDots={false}
            disableDotsNavigation
            scrollSmooth
            setCurrentStep={setCurrentStep}
            steps={reactTourSteps}
            styles={{
                popover: (base) => ({
                    ...base,
                    "--reactour-accent": "#ef5a3d",
                    borderRadius: borderRadius,
                    marginRight: "2rem",
                    transform: "translate(0px, 59px)",
                }),
                maskArea: (base) => ({ ...base, rx: borderRadius }),
            }}>
            {children}
        </TourProvider>
    );
}

What I've Tried

I've tried changing the translation in both the TourProvider and the Current Step (This being the ideal for what I want to acheive). But the translation is not changing.

How do I stop the popover from going outside of the screen? If that's not possible, how do I affect the translation of the popover?

[elrumordelaluz]

Hi @GeorgeDMFincher, thanks for open the Issue.

Mind creating a minimal reproduction in a sandbox with the code you are sharing in order to allow to play arounf? Thanks!

[ghost]

@elrumordelaluz Sure thing. Will get it up and going in the next day or so 👍

[TheInfamousGrim]

@elrumordelaluz try this link for code sandbox.

Also, link to a repo that will demonstrate the behavior at 320 px width if you'd prefer to fork that and work from there 👍

Start the tour up by clicking the button at the top of the page.

I know this isn't a recreation of the original, but it's from my company's source code, but I believe this is enough to demonstrate the issue.

Also this is my personal GitHub account.

Screenshot of Issue - 320 pixel width