[BUG]: Checkbox's position:absolute value is taken from the entire page

[erbilnas]

Issue description

When the checkbox is wrapped with a dialog, it should take its position relative to the height of the dialog, not the page.

https://stackblitz.com/edit/vue2-vite-starter-ncdgf1?file=index.html,src%2FApp.vue

Media & Screenshots

With position:absolute

Without position:absolute

Baklava Version

3.0.0-beta.14

Operating system

No response

Priority this issue should have

Medium (should be fixed soon)

Please review the checkboxes that are applicable.

• This issue is directly related to React

[erbilnas]

Imho, we should add

position: absolute;

on input instead of .check-mark

input[type="checkbox"] {
  appearance: none;
  outline: none;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid var(--bl-color-neutral-lighter);
  border-radius: var(--bl-border-radius-xs);
  width: var(--bl-size-m);
  height: var(--bl-size-m);
  min-width: var(--bl-size-m);
  min-height: var(--bl-size-m);
  max-width: var(--bl-size-m);
  max-height: var(--bl-size-m);
}

.check-mark {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -43,6 +58,38 @@ input {
  background-color: var(--bl-color-neutral-full);
}

[github-actions]

🎉 This issue has been resolved in version 3.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀