Chatbot Layout Issues

Hello,

I followed the AI Chatbot course and it works as expected, however I'm having layout issues on the mobile side. When the repeater populates with the next set of responses, theres a big gap thats added above the next repeater items. Theres no extra spaces in my layout that creates this so I'm confused about what could cause this. This only happens on the mobile website. The desktop website works just fine with the layout. I attached some screenshots as well as my frontend code.

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();
    })
});