NICE DCV SDK not showing in full width and height

so i start my dcv session with dcv create-session --owner dcv --init init.sh elliot the screen is how dcv gets displayed on my frontend

on my code i have something like this:

import "./dcvjs/dcv.js";
let auth,
    connection,
    serverUrl;

console.log("Using NICE DCV Web Client SDK version " + dcv.version.versionStr);

function main() {
    console.log("Setting log level to INFO");
    dcv.setLogLevel(dcv.LogLevel.INFO);

    serverUrl = "https://IP:PORT";
    
    console.log("Starting authentication with", serverUrl);

    auth = dcv.authenticate(
        serverUrl,
        {
            promptCredentials: onPromptCredentials2,
            error: onError,
            success: onSuccess
        }
    );

window.main = main;

function onPromptCredentials(auth, challenge) {
    if (challengeHasField(challenge, "username") && challengeHasField(challenge, "password")) {
        auth.sendCredentials({ username: "YOURUSER", password: "YOUR_PW" });
    }
}

function challengeHasField(challenge, field) {
    return challenge.requiredCredentials.some(credential => credential.name === field);
}

function onError(auth, error) {
    console.log("Error during the authentication: ", error.message);
}

function onSuccess(auth, result) {
    let { sessionId, authToken } = { ...result[0] };

    connect(sessionId, authToken);
}

function connect(sessionId, authToken) {
    dcv.connect({
        url: serverUrl,
        sessionId: sessionId,
        authToken: authToken,
        divId: "dcv-display", // The div where the NICE DCV session will be rendered
        callbacks: {
            firstFrame: () => {
                console.log("First frame received");
                document.getElementById('form-container').style.display = 'none';
                document.getElementById('dcv-display').style.display = 'block';
                resizeDisplay(); // Ensure the display resizes when the first frame is received
                enterFullScreen(document.getElementById('dcv-display')); // Ensure full-screen mode
            },
            resize: () => {
                resizeDisplay(); // Resizes the display when the browser is resized
            }
        }
    }).then(function (conn) {
        // Request resolution explicitly after connection
        connection = conn;
        requestResolution(); // Explicitly ask for client resolution
    }).catch(function (error) {
        console.log("Connection failed with error " + error.message);
    });
}

function requestResolution() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    console.log(`Requesting resolution change to ${width}x${height}`);
    // Send the resolution request to the server (NICE DCV server should handle this)
    connection.setResolution(width, height); // Assuming setResolution is supported in your SDK
}


function enterFullScreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
}

function resizeDisplay() {
    let display = document.getElementById('dcv-display');
    
    // Set the canvas size to match the viewport dimensions
    display.style.width = `${window.innerWidth}px`;
    display.style.height = `${window.innerHeight}px`;

    // Log the requested resolution
    console.log(`Requesting resolution change to ${window.innerWidth}x${window.innerHeight}`);
    
    // Request resolution change from the DCV server
    if (connection && connection.setResolution) {
        connection.setResolution(window.innerWidth, window.innerHeight)
            .then(() => {
                console.log(`Resolution successfully set to ${window.innerWidth}x${window.innerHeight}`);
            })
            .catch(err => {
                console.error('Failed to set resolution:', err);
            });
    } else {
        console.error('connection.setResolution is not available');
    }
}


function submitCredentials(e) {
    var credentials = {};
    fieldSet.childNodes.forEach(input => credentials[input.id] = input.value);
    auth.sendCredentials(credentials);
    e.preventDefault();
}

var fieldSet;

function createLoginForm() {
    var submitButton = document.createElement("button");

    submitButton.type = "submit";
    submitButton.textContent = "Login";

    var form = document.createElement("form");
    fieldSet = document.createElement("fieldset");

    form.onsubmit = submitCredentials;
    form.appendChild(fieldSet);
    form.appendChild(submitButton);

    document.body.appendChild(form);
}

function addInput(name) {
    var type = name === "password" ? "password" : "text";

    var inputField = document.createElement("input");
    inputField.name = name;
    inputField.id = name;
    inputField.placeholder = name;
    inputField.type = type;
    fieldSet.appendChild(inputField);
}

function onPromptCredentials2(_, credentialsChallenge) {
    createLoginForm();
    credentialsChallenge.requiredCredentials.forEach(challenge => addInput(challenge.name));
}

see images:

how can i make this to be full width in the display, i see in the logs (from the image) it is setting the display to a small screen, but i want it to be full depending on the screen of the device i am using this on