e2e: Remove fade-in for HTML dialogs

Remove fade-in for HTML dialogs as it seems to have caused our tests to
be flaky and also to result in a flicker at least on my Ubuntu+Chrome
and Firefox setup when opening a dialog.

e2e/play/test.js

@@ -91,21 +91,15 @@ end
       }
       await page.locator('input[type="text"]').click()
       await page.locator('input[type="text"]').press("ArrowRight")
-      await expect(page).toHaveScreenshot("share-dialog.png", { maxDiffPixelRatio: 0.01 })
-      await page.getByRole("button", { name: "Done" }).click()
-      if (testInfo.project.name != "ios") {
-        //TODO: there is a rendering bug for this on ios, view snapshot diff, see https://github.com/evylang/todo/issues/50
-        await expect(page).toHaveScreenshot("no-dialog.png")
-      }
+      await expect(page).toHaveScreenshot("share-dialog.png")
+      await page.locator("#dialog-share .icon-close").click()
+      await expect(page).toHaveScreenshot("no-dialog.png")
       await page.locator("#hamburger").click()
       await page.getByRole("button", { name: "About Evy" }).click()
       await page.waitForLoadState("networkidle")
       await expect(page).toHaveScreenshot("about-dialog.png", { maxDiffPixelRatio: 0.01 })
       await page.locator("header").filter({ hasText: "About" }).getByRole("button").click()
-      if (testInfo.project.name != "ios") {
-        //TODO: there is a rendering bug for this on ios, view snapshot diff, see https://github.com/evylang/todo/issues/50
-        await expect(page).toHaveScreenshot("no-dialog.png")
-      }
+      await expect(page).toHaveScreenshot("no-dialog.png")
     })
 
     test("read input", async ({ page, baseURL }, testInfo) => {

frontend/css/dialog.css

@@ -15,22 +15,6 @@ dialog {
   background: var(--background);
 }
 
-dialog[open] {
-  /* Cannot use opacity because dialog is "display:none"
-    when hidden. Changing this messes with accessibility. */
-  animation: fadein 0.2s ease-in forwards;
-}
-
-@keyframes fadein {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
 dialog form {
   display: flex;
   flex-direction: column;