Close button on modal overlaps with content

[ishangupta-ds]

When modal is used with no margin or padding and with a close button, the button overlaps with the content, because 100% of the height and width are required along with the close button, the styling breaks and the button position is somewhere between the content.

[whitetiger1399]

Currently, the position of the close button in the Modal component of Litmus-ui has a position: absolute which was set as per then available Figma designs in Litmus. If for the given use case the overlapping can be avoided using padding then this issue can be closed as the current styling of the Modal component has been made generic to serve larger usecases. cc: @arkajyotiMukherjee

[arkajyotiMukherjee]

We'll have a discussion regarding the modals with @mallick370 since the designs have changed quite a lot since our last implementation of the modals. You might want to join if you have suggestions to give @ishangupta-ds @whitetiger1399.

[ishangupta-ds]

sure @arkajyotiMukherjee i had to use a negative padding/margin for this button while fixing the yaml editor in the modal as the close button came over the content (area) of the editor itself. cc: @mallick370 @whitetiger1399 This issue had been created for the same reason.

[ishangupta-ds]

Currently, the position of the close button in the Modal component of Litmus-ui has a position: absolute which was set as per then available Figma designs in Litmus. If for the given use case the overlapping can be avoided using padding then this issue can be closed as the current styling of the Modal component has been made generic to serve larger use-cases. cc: @arkajyotiMukherjee

I guess the first concern should be implementing something as per the design rather than serving the larger use-case. @whitetiger1399 As @arkajyotiMukherjee mentioned the designs have changed and also the previous design had the close button for editor modal at a different position where the current absolute style won't work no matter how much the positive padding or margin is given. I guess the earlier implementation was not validated / verified against all use-cases from the figma file.