<.popover>
  <.popover_trigger target="popover-single-popover">
    <.button variant="outline">
      Open popover
    </.button>
  </.popover_trigger>
  <.popover_content class="w-80" side="top">
    <div class="grid gap-4">
      <div class="space-y-2">
        <h4 class="font-medium leading-none">
          Dimensions
        </h4>
        <p class="text-sm text-muted-foreground">
          Set the dimensions for the layer.
        </p>
      </div>
      <div class="grid gap-2">
        <div class="grid grid-cols-3 items-center gap-4">
          <.label for="width">
            Width
          </.label>
          <.input id="width" default-value="100%" class="col-span-2 h-8"></.input>
        </div>
        <div class="grid grid-cols-3 items-center gap-4">
          <.label for="maxWidth">
            Max. width
          </.label>
          <.input id="maxWidth" default-value="300px" class="col-span-2 h-8"></.input>
        </div>
        <div class="grid grid-cols-3 items-center gap-4">
          <.label for="height">
            Height
          </.label>
          <.input id="height" default-value="25px" class="col-span-2 h-8"></.input>
        </div>
        <div class="grid grid-cols-3 items-center gap-4">
          <.label for="maxHeight">
            Max. height
          </.label>
          <.input id="maxHeight" default-value="none" class="col-span-2 h-8"></.input>
        </div>
      </div>
    </div>
  </.popover_content>
</.popover>