fix: popover with very narrow text (#1894)

#1702

If the page is resized before any footnotes have been opened, the
`resize` action can compute a very small `max-width` based on zero size
footnote contents. This was allowed to happen because `isMounted` always
returns true after the popover element is created but not yet shown.

- `isMounted` now checks whether the popover is contained in the DOM.
- `createElementFromHTML` now unwraps newly created elements to improve
  robustness in case `parentElement` gets used elsewhere.

cypress/e2e/click.cy.ts

@@ -1,6 +1,8 @@
+const DEFAULT_VIEWPORT_HEIGHT = 600
+
 context('Click', () => {
   beforeEach(() => {
-    cy.viewport(800, 600)
+    cy.viewport(800, DEFAULT_VIEWPORT_HEIGHT)
     cy.visit('/cypress/e2e/fixtures/click.html')
   })
 
@@ -17,4 +19,11 @@ context('Click', () => {
     cy.get('.littlefoot__popover').should('not.have.class', 'is-scrollable')
     cy.get('.littlefoot__content').should('not.have.attr', 'tabindex')
   })
+
+  it('popover layout upon resizing window before activation (#1702)', () => {
+    // Resize the viewport before any footnotes have been activated.
+    cy.viewport(800, DEFAULT_VIEWPORT_HEIGHT + 100)
+    cy.findByTitle('See Footnote 1').click()
+    cy.get('.littlefoot__content').invoke('width').should('be.greaterThan', 100)
+  })
 })

src/dom/document.ts

@@ -48,7 +48,10 @@ function getByClassName<E extends Element>(element: E, className: string): E {
 function createElementFromHTML(html: string): HTMLElement {
   const container = document.createElement('div')
   container.innerHTML = html
-  return container.firstElementChild as HTMLElement
+  const element = container.firstElementChild as HTMLElement
+  // Remove element from container div.
+  element.remove()
+  return element
 }
 
 function children(element: Element, selector: string): readonly Element[] {

src/dom/footnote.ts

@@ -22,7 +22,7 @@ export type FootnoteElements = Readonly<{
   wrapper: HTMLElement
 }>
 
-const isMounted = (popover: HTMLElement) => !!popover.parentElement
+const isMounted = (popover: HTMLElement) => document.body.contains(popover)
 
 export function footnoteActions({
   id,