🐛 Bug Report: there is a bug whit modals

[Trongar]

👟 Reproduction steps

Im using this whit an astro project, when i copy and paste the code from de the dos it doesn´t show as is spected

this is my code

<li><button class="card s-xciFPC5Srn6Q"><div class="avatar is-size-large s-xciFPC5Srn6Q"><span class="icon-plus s-xciFPC5Srn6Q"></span></div> <h4 class="text u-font-size-20 u-bold s-xciFPC5Srn6Q" style="text-wrap: balance;">Nueva tienda</h4> <p class="text s-xciFPC5Srn6Q" style="text-wrap: pretty;">Crea una nueva tienda donde podras administrar tus productos y poder
    realizar registros de las mismas
    <button class="button s-yu7OS-GWNOYq"><span class="s-yu7OS-GWNOYq">Open Modal</span></button> <dialog class="modal s-yu7OS-GWNOYq" id="dialog" open=""><form class="modal-form s-yu7OS-GWNOYq" method="dialog"><header class="modal-header s-yu7OS-GWNOYq"><div class="u-flex u-main-space-between u-cross-center u-gap-16 s-yu7OS-GWNOYq"><div class="avatar is-color-orange is-medium s-yu7OS-GWNOYq"><span class="icon-exclamation s-yu7OS-GWNOYq" aria-hidden="true"></span></div> <h4 class="modal-title heading-level-5 s-yu7OS-GWNOYq">Modal title</h4> <button class="button is-text is-small is-only-icon s-yu7OS-GWNOYq" aria-label="Close modal"><span class="icon-x s-yu7OS-GWNOYq" aria-hidden="true"></span></button></div></header> <div class="modal-content u-small s-yu7OS-GWNOYq">Modal label text.</div> <div class="modal-footer s-yu7OS-GWNOYq"><div class="u-flex u-main-end u-gap-16 s-yu7OS-GWNOYq"><button class="button is-text s-yu7OS-GWNOYq"><span class="text s-yu7OS-GWNOYq">Button</span></button> <button class="button is-secondary s-yu7OS-GWNOYq"><span class="text s-yu7OS-GWNOYq">Button</span></button></div></div></form></dialog></p></button><!--<Team-card>--><!--<New-store-card>--></li>

👍 Expected behavior

it should be looking like this

👎 Actual Behavior

but it looks like this

🎲 Appwrite version

Different version (specify in environment)

💻 Operating system

Linux

🧱 Your Environment

in runnin on a wsl machine, in an astro project, i just copy it from the demo https://github.com/appwrite/demos-for-astro and upgraded all dependecys but even i've seen this behavior on a codepen instance

https://codepen.io/Trongar/pen/BabyWaP

👀 Have you spent some time to check if this issue has been raised before?

• [X] I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• [X] I have read the Code of Conduct

[github-actions[bot]]

Uh oh! @Trongar, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[Trongar]

even, this is my package.json

{
  "name": "example-blog",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@appwrite.io/pink": "^0.2.0",
    "@astrojs/mdx": "^2.0.2",
    "@astrojs/rss": "^4.0.1",
    "@astrojs/sitemap": "^3.0.3",
    "@astrojs/svelte": "^5.0.2",
    "@astrojs/vercel": "^6.1.0",
    "appwrite": "^11.0.1",
    "astro": "^4.0.7",
    "nanostores": "^0.8.1",
    "sanitize-html": "^2.10.0",
    "svelte": "^4.2.8"
  },
  "devDependencies": {
    "@types/sanitize-html": "^2.9.0"
  }
}

[stnguyen90]

@Trongar, thanks for creating this issue! 🙏🏼 The dialog Did you add JavaScript code to call the various show/close methods as mentioned in the docs?

[github-actions[bot]]

Uh oh! @stnguyen90, the image you shared is missing helpful alt text. Check https://github.com/appwrite/pink/issues/135#issuecomment-2110938725.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.