UX (mobile): Not visible that one can scroll to the right

[jnnkB]

Hey, I am really happy I found this tool. It works great :)

However, I’ve noticed that on small screens, users don’t realize they can scroll right to see more dates. This often leads to incomplete poll responses.

Here are two ideas to fix this:

1. Show Partial Dates: Always display part of the next day to indicate more dates are available.

2. Add a Scroll Tip: Use a popup to let users know they can scroll. This might be a bit annoying, though.

I'd be very happy if this could be resolved!

[jnnkB]

Here is a short POC, on how the algorithm to rescale the width could work

function adaptColumnWidth(areaWidth, columnWidth, columnCount) {
    let nExact = areaWidth / columnWidth;
    let nFloor = Math.floor(areaWidth / columnWidth);

    if (columnCount * columnWidth > areaWidth) {
        // Increase the width of the columns such that the last column shown only fits halfway
        columnWidth = areaWidth / (nFloor - 0.5);
    }
    return columnWidth;
}

function fixWidth() {
    const days = document.querySelector(".Calendar_days__8bWM7");
    const areaWidth = days.getBoundingClientRect().width;
    const columnCount = document.querySelectorAll(".Calendar_day__MYs0f").length;
    const oldWidth = document.querySelector(".Calendar_interval__XJbVJ").getBoundingClientRect().width;
    const newWidth = adaptColumnWidth(areaWidth, oldWidth, columnCount);
    console.log(areaWidth, columnCount, oldWidth, newWidth);
    for (let elem of document.querySelectorAll(".Calendar_heading__yd1NZ,.Calendar_interval__XJbVJ")) {
        elem.style.width = newWidth + "px";
    }
}

fixWidth()