refactor(component):

Made Interactive responsive

src/components/InteractiveSpare.vue

@@ -3,7 +3,7 @@
     <!-- Image -->
     <img :src="spareImageSrc" :class="['w-' + pngSize, 'h-' + pngSize, imageClass]" alt="Sparemannen" @click="nextSpeech">
     <!-- Speech Bubble -->
-    <div class="rounded-lg bg-white p-4 text-black border-black border-2" :style="{ minHeight: '4rem' }">
+    <div v-if="currentSpeech" class="rounded-lg bg-white p-4 text-black border-black border-2 min-h-16 max-w-48">
       <span>{{ currentSpeech }}</span>
     </div>
   </div>
@@ -36,16 +36,26 @@ const props = defineProps<Props>();
 const speech = ref<string[]>(props.speech || []);
 
 const currentSpeechIndex = ref(0);
-const currentSpeech = ref(props.speech[0] || '...');
+const currentSpeech = computed(() => speech.value[currentSpeechIndex.value]);
 
 const nextSpeech = () => {
   if (speech.value.length > 0) {
-    currentSpeechIndex.value = (currentSpeechIndex.value + 1) % speech.value.length;
-    currentSpeech.value = props.speech[currentSpeechIndex.value];
+    // Remove the currently displayed speech first
+    speech.value.splice(currentSpeechIndex.value, 1);
+
+    // Check if there are any speeches left after removal
+    if (speech.value.length > 0) {
+      // Move to the next speech or reset to the beginning if the current index is out of range
+      currentSpeechIndex.value = currentSpeechIndex.value % speech.value.length;
+    } else {
+      // If no speeches left, reset index to indicate no available speech
+      currentSpeechIndex.value = -1;
+    }
   }
 };
 
 
+
 const imageClass = computed(() => {
   return [
     'transform',