Chatbot Layout on Mobile

Hello Eitan,

I followed your course to build the chatbot however I have some layout concerns with my repeater. It's currently adding extra space to the top of the next items in the repeater after the bot's response. In the desktop site it works fine and there's not extra space. This is only happening in the mobile version. I've attached screenshots and also my frontend code for your review. Thank you in advance!

import { getNextChatMessageWithChatHistory } from "backend/chatbot"

/*[
{ “role”: “system”, “content”: “You are a helpful assistant.” },
{ “role”: “user”, “content”: “Who won the world series in 2020?” },
{ “role”: “assistant”, “content”: “The Los Angeles Dodgers won the World Series in 2020.” },
{ “role”: “user”, “content”: “Where was it played?” }
]
*/
$w.onReady(function () {

    let messages = [];

    const hideStartScreen = () => {
        $w("#startSection").collapse();
        $w("#conversationSection").expand();
    }

    $w("#messagesRepeater").onItemReady(($item, itemData, index) => {
        console.log(itemData);
        
        if(itemData.role === "user"){
            $item("#userText").text = itemData.content;
            $item("#botWrapper").hide();
        } else if (itemData.role === "assistant"){
            $item("#botText").text = itemData.content;
            $item("#userWrapper").hide();
        }
        if(itemData.role === "error"){
            $item("#errorText").text = "There was a problem getting a response, please try again";
            $item("#errorText").show();
            $item("#userWrapper").hide();
            $item("#botWrapper").hide();
        }

    })

    const populateMessagesRepeater = () => {
        $w("#errorText").hide();
        $w("#messagesRepeater").data = messages.map((message) => ({ ...message, _id: Math.floor(Math.random() * 1000000000).toString() }));
        if ($w("#messagesRepeater").collapsed) $w("#messagesRepeater").expand();
        $w("#scrollIndicator").scrollTo();

    }

    const showErrorMessage = (error)=>{
        const errorMessage = {
            role: "error",
            content: error
        }
        const messagesWithError = [...messages, errorMessage];
        $w("#messagesRepeater").data = messagesWithError.map((message) => ({ ...message, _id: Math.floor(Math.random() * 1000000000).toString() }));
        $w("#scrollIndicator").scrollTo();
    }
    const messageSendHandler = async () => {
        if (messages.length === 0) hideStartScreen();
        const userInput = $w("#userInput").value;
        if(userInput.length < 10){
            $w("#errorText").text = "Please enter 10 or more characters.";
            $w("#errorText").show();
            return;
            

        }
        $w("#userInput").value = "";
        const message = {
            role: "user",
            content: userInput

        }
        messages.push(message);
        populateMessagesRepeater();
        try{
            const answer = await getNextChatMessageWithChatHistory(messages);
        messages.push(answer);
        populateMessagesRepeater();
        } catch (error){
            console.log(error);
            showErrorMessage("There was a problem getting a response, please try again");
        }
        

    }
    $w('#sendButton').onClick(messageSendHandler);
    
    $w("#userInput").onKeyPress((event) => {
            if(event.key !== "Enter") return;
            messageSendHandler();
    })
});