The modal content and the footer buttons overflow to the right

monday Apps & Developers
, ,
1

Hi team,

I’m trying to use the new Modal component in my app.

I noticed some visual issues, so I tried using it in an empty project to isolate the problem.

The project only renders my component, and the code is exactly as shown in the documentation:

import "@vibe/core/tokens"
import {Modal, ModalBasicLayout, ModalContent, ModalFooter, ModalHeader} from "@vibe/core/next";
import {Link, Text} from "@vibe/core";

const MondayDialog = ()=>{

    return <Modal
        container={{}}
        id="modal-basic"
        onClose={function noRefCheck(){}}
        show
        size="medium"
    >
        <ModalBasicLayout>
            <ModalHeader
                description={<Text type="text1">Modal subtitle, can come with icon{' '}<Link inheritFontSize inlineText text="and link."/></Text>}
                title="Modal title"
            />
            <ModalContent>
                <Text
                    align="inherit"
                    element="p"
                    type="text1"
                >
                    Modal content will appear here, you can custom it however you want, according to the user needs. Please make sure that the content is clear for completing the relevant task.
                </Text>
            </ModalContent>
        </ModalBasicLayout>
        <ModalFooter
            primaryButton={{
                onClick: function noRefCheck(){},
                text: 'Confirm'
            }}
            secondaryButton={{
                onClick: function noRefCheck(){},
                text: 'Cancel'
            }}
        />
    </Modal>


}
export default MondayDialog;

When I test the page, I see that the dialog content and the footer buttons are misplaced, as shown in the image:

image
image1312×802 84.8 KB

What am I doing wrong? Am I missing something?

I haven’t added any styles.

Thanks in advance,
Carlos

2

Hey @carlos.fernandez

Bill here from monday.com :wave:

So that we can look into this further would you be able to please fill this form adding as much information as possible to it (such as account ID, board IDs, item IDs, timestamps, etc.) so that our team can take a look into it?

Cheers,
Bill