fix bug with chord card sizing

Author: erikbjoern

components/ChordCard.vue

@@ -1,10 +1,8 @@
 <template>
- <div>
-
  <div
  class="flex flex-col items-center bg-white border-green-500 select-none"
  :class="[
- expanded ? 'rounded-lg px-8 py-6' : 'rounded-full min-w-[1.5rem] w-[fit-content] h-6', 
+ expanded ? 'rounded-lg px-8 py-6' : 'rounded-full min-w-[1.5rem] w-[fit-content] h-6',
  selectedChord.label !== 'N/C' && 'border',
  ]"
  >
@@ -39,8 +37,6 @@
  </div>
  </div>
  </div>
- <div v-if="expanded && alternativeChords.length == 0" class="h-[6rem] flex-none w-full"></div>
- </div>
 </template>
 
 <script setup lang="ts">

components/SwipeHorizontal.vue

@@ -34,7 +34,8 @@
  :expanded="true"
  :id="[chordData.measure, chordData.beat].join('-')"
  name="chord-card"
- class="mx-auto shadow-md -translate-y-[10vh] sm:-translate-y-[5vh]"
+ class="mx-auto shadow-md"
+ :style="{ transform: `translateY(calc(-8vh - ${chordData.alternativeChords.length == 0 ? 3 : 0}rem))` }"
  @click.stop="() => { }"
  />
  <button