How to change the size of the screen in Get Items from under Sales Invoice doctype

I have created a script to display items from Delivery Note under the Get Items From in Sales Invoice but i want to increase the size of the screen displayed so that every column displayed will be visible but i have no idea how to do it, this is the script:

frappe.ui.form.on(‘Sales Invoice’, {
refresh: function(frm) {
if (frm.doc.docstatus === 0 && frm.page.current_view_name !== “pos” && !frm.doc.is_return) {
frm.add_custom_button(__(‘Get From Delivery Note’),
function() {
if (!frm.doc.customer) {
frappe.throw({
title: __(“Mandatory”),
message: __(“Please Select a Customer”)
});
}
erpnext.utils.map_current_doc({
method: “erpnext.stock.doctype.delivery_note.delivery_note.make_sales_invoice”,
source_doctype: “Delivery Note”,
target: frm,
setters: {
customer: frm.doc.customer,
posting_date: null,
rr_no: null,

                    },
                    get_query_filters: {
                        docstatus: 1,
                        status: ["not in", ["Closed", "On Hold"]],
                        company: frm.doc.company,
                        customer: frm.doc.customer,
                    }
                });
            }, __("Get Items From")
        ).addClass('wide-button'); // Add a class to the button
    }

}

});
this is the output screen:

Please add the below line, after the method.

size: 'extra-large',

Then reload Ctrl+Shift+R and check it.

hi,
thanks for your suggestion but it’s working now i have added these codes " // Inject custom CSS to increase the modal width
$(‘head’).append( <style> .modal-dialog { max-width: 85% !important; /* Increase modal width */ width: 85% !important; } </style> ); ", this is the new script:

frappe.ui.form.on(‘Sales Invoice’, {
refresh: function(frm) {
// Inject custom CSS to increase the modal width
$(‘head’).append( <style> .modal-dialog { max-width: 85% !important; /* Increase modal width */ width: 85% !important; } </style> );

    if (frm.doc.docstatus === 0 && frm.page.current_view_name !== "pos" && !frm.doc.is_return) {
        frm.add_custom_button(__('Get From Delivery Note'),
            function() {
                if (!frm.doc.customer) {
                    frappe.throw({
                        title: __("Mandatory"),
                        message: __("Please Select a Customer")
                    });
                }
                erpnext.utils.map_current_doc({
                    method: "erpnext.stock.doctype.delivery_note.delivery_note.make_sales_invoice",
                    source_doctype: "Delivery Note",
                    target: frm,
                    setters: {
                        customer: frm.doc.customer,
                        project_location: null,
                        posting_date: null,
                        rr_no: null,
                        old_dr_no: null,
                    },
                    get_query_filters: {
                        docstatus: 1,
                        status: ["not in", ["Closed", "On Hold"]],
                        company: frm.doc.company,
                        customer: frm.doc.customer,
                    }
                });
            }, __("Get Items From")
        ).addClass('wide-button'); // Add a class to the button
    }
}

});

Don’t need to apply CSS, please explore the Dialog API.

You can set the size like

size: 'small', // small, large, extra-large 

where exactly should i put the size in my script?

Again read carefully my above post.

method: "erpnext.stock.doctype.delivery_note.delivery_note.make_sales_invoice",
size: 'extra-large',

that’s great! thanks!