Select options show behind Modal.Content.Header and Modal.Content.Footer

[Scott3730]

Current Behavior

When placing a Select inside a Modal.Content.Body, between a Modal.Content.Header and Modal.Content.Footer, the select options display behind the header and footer, making it impossible to use correctly.

Expected Behavior

The select options should be above all other elements, always when the select menu is open

Steps To Reproduce

<Modal handleClose={closeModal}>
      <Modal.Content slot="content" class="max-h-full">
        <Modal.Content.Header slot="header" class="h-16"
          >Start an Activity</Modal.Content.Header
        >
        <Modal.Content.Body slot="body" class="overflow-y-auto">
          <div class="mb-4">
            <Select
              value={selectedActivityType}
              name="activitySelect"
              options={activityTypeOptions}
              on:change={selectedActivityTypeChanged}
            >
              <Select.Label slot="label">Activity Type</Select.Label>
              <Select.Options slot="options">
                {#each activityTypeOptions as option}
                  {#key option}
                    <Select.Options.Option {option} />
                  {/key}{/each}
              </Select.Options>
            </Select>
          </div>
          <div class="mb-4">
            <Select
              disabled={selectedActivityType !== "practice"}
              value={selectedListType}
              name="listTypeSelect"
              options={listTypeOptions}
              on:change={selectedListTypeChanged}
            >
              <Select.Label slot="label">List Type</Select.Label>
              <Select.Options slot="options">
                {#each listTypeOptions as option}
                  {#key option}
                    <Select.Options.Option {option} />
                  {/key}{/each}
              </Select.Options>
            </Select>
          </div>
          <div class="mb-4">
            <Select
              value={selectedList}
              disabled={selectedListType === "smart"}
              name="listSelect"
              options={listOptions}
              on:change={selectedListOptionChanged}
            >
              <Select.Label slot="label">List</Select.Label>
              <Select.Options slot="options">
                {#each listOptions as option}
                  {#key option}
                    <Select.Options.Option {option} />
                  {/key}{/each}
              </Select.Options>
            </Select>
          </div>
          <div class="bg-blue-50 rounded p-3">
            Info message here
          </div>
        </Modal.Content.Body>
        <Modal.Content.Footer slot="footer" class="p-4 text-right">
          <Button
            type="primary"
            loading={startActivityButtonLoading}
            on:click={startActivity}>Start Activity</Button
          >
        </Modal.Content.Footer>
      </Modal.Content>
    </Modal>

Link to Reproduction / Stackblitz

No response

More Information

Manually specifying the Z-index of any of the related elements using CSS appears to have no effect; including the Modal.Content.Header, Modal.Content.Body, Modal.Content.Footer, Select.Options and Select.Options.Option