Modals: The x button position is off

[damithc]

The X seems too close to the edge?

[tlylt]

Link to the location of this particular modal? Modals on the MarkBind docs seem ok

[damithc]

Link to the location of this particular modal? Modals on the MarkBind docs seem ok

Hmm... in fact, I started noticing this only recently myself.

Try https://nus-cs2103-ay2324s2.github.io/website/schedule/week10/project.html

I'm on Win 11, this appeared on Chrome, Edge, Firefox.

[EltonGohJH]

Verified that this issue exists on Mac OS chrome and also Windows 11 Chrome.

[tlylt]

This issue only occurs for dismissible box containing a modal via the include mechanism. The minimal reproducible example is as follows:

In a.md

<box dismissible>

<include src="b.md#example" />

</box>

In b.md

<div id="example">

<trigger for="modal-a">modal trigger</trigger>.

<modal header="modal header" id="modal-a" >
  Lorem ipsum
</modal>

</div>

The reason is because when modal is included inside a box via the include mechanism, the model content is part of the box element, hence resulting in this CSS selector .alert-dismissible .btn-close from Bootstrap modal to apply on the closing button, adding a position:absolute to it.

In the normal scenario, this selector won't apply:

[damithc]

This issue only occurs for dismissible box containing a modal via the include mechanism.

I see. Thanks for the help with the investigation, @tlylt