fix: dropdown content position does not react to content size

[AnotiaWang]

fixes #276

[stackblitz[bot]]

Run & review this pull request in StackBlitz Codeflow.

[netlify[bot]]

✅ Deploy Preview for sensational-seahorse-8635f8 ready!

Name	Link
🔨 Latest commit	b5c4a572d9e652a22a1cc44e0c245b3e26c834a5
🔍 Latest deploy log	https://app.netlify.com/sites/sensational-seahorse-8635f8/deploys/65f552e0a757f9000815223f
😎 Deploy Preview	https://deploy-preview-277--sensational-seahorse-8635f8.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[AnotiaWang]

You can use this modified version of FwbDropdownExamplePlacement.vue to test:

<template>
  <div class="vp-raw flex gap-2 flex-wrap">
    <fwb-dropdown
      text="Dropdown"
      :placement="placement"
      close-inside
    >
      <fwb-list-group>
        <fwb-list-group-item
          v-for="i in items"
          :key="i"
        >
          {{ i }}
        </fwb-list-group-item>
      </fwb-list-group>
    </fwb-dropdown>
    <fwb-dropdown
      placement="top"
      text="Top"
    >
      <p class="p-2">
        Dropdown content here
      </p>
    </fwb-dropdown>
    <fwb-dropdown
      placement="right"
      text="Right"
    >
      <p class="p-2">
        Dropdown content here
      </p>
    </fwb-dropdown>
    <fwb-dropdown text="Bottom">
      <p class="p-2">
        Dropdown content here
      </p>
    </fwb-dropdown>
    <fwb-dropdown
      placement="left"
      text="Left"
    >
      <p class="p-2">
        Dropdown content here
      </p>
    </fwb-dropdown>
  </div>
</template>

<script setup>
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from '../../../../src/index'
import { onUnmounted, ref } from 'vue'

const items = ref([])
const placement = ref('top')

// Click the dropdown to activate it before this timeout ends
const interval = setInterval(() => {
  if (items.value.length > 4) {
    items.value = []
  } else {
    items.value.push('1', '2', '3')
  }
  if (placement.value === 'top') placement.value = 'bottom'
  else if (placement.value === 'bottom') placement.value = 'left'
  else if (placement.value === 'left') placement.value = 'right'
  else placement.value = 'top'
}, 2000)

onUnmounted(() => clearInterval(interval))
</script>