CSS

<button type="button" id="popover_button" class="btn" popovertarget="popover">
Open popover
</button>
<div popover id="popover" class="popover" role="dialog">
<= render "dimensions form" %>
</div>

• popover {
  background-color: var(--color-surface);
  border-radius: var(--rounded-md); border-width: var(--border);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  inline-size: var(--popover-size, max-content); 
  
  /* Anchor position */ 
  position-area: block-end; 
  position-try-fallbacks: flip-block;
  margin-block-start: var(--size-1);
  
  /* Setup transition */
  transition-duration: var(--time-150);
  transition-property: display, opacity, overlay, transform;
  
  /* Exit stage to */
  opacity: 0; transform: var(--scale-95);
  
  /* On stage */
  &: popover-open {
    opacity: 1; transform: var(--scale-100);
  }

  /* Enter stage from */
  @starting-style {
    &: popover-open {
      opacity: 0; transform: var(--scale-95);
    }
  }
}

.hero {
  height: 100svh;
}