From 7e0d23c0de91c76efd36b5d12cb4eaef6d37eff0 Mon Sep 17 00:00:00 2001
From: Ina <inamar@stud.ntnu.no>
Date: Fri, 3 May 2024 15:54:51 +0200
Subject: [PATCH] fix: update responsive InteractiveSpare

---
 src/views/ConfigSpendingItemsAmountView.vue | 4 ++--
 src/views/ConfigSpendingItemsView.vue       | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/ConfigSpendingItemsAmountView.vue b/src/views/ConfigSpendingItemsAmountView.vue
index 4f63e2d..15a28c5 100644
--- a/src/views/ConfigSpendingItemsAmountView.vue
+++ b/src/views/ConfigSpendingItemsAmountView.vue
@@ -4,8 +4,8 @@
             Hvor mye bruker du per kjøp på ...
         </h1>
       <p class="text-sm mb-8 md:mb-10">Her kan du skrive inn hvor mye du bruker per kjøp på ulike kategorier</p>
-        <div class="absolute bottom-0 md:bottom-40 left-0 w-40 h-40 md:w-52 md:h-52 ml-4">
-          <p class="text-sm font-bold mb-3 animate-bounce">Trykk på meg for hjelp ❗️</p>
+      <div class="md:absolute fixed bottom-3 md:bottom-40 left-2 w-28 h-28 md:w-40 md:h-40 lg:w-52 lg:h-52 ml-4">
+          <p class="md:text-sm text-xs font-bold mb-3 animate-bounce invisible sm:visible">Trykk på meg for hjelp ❗️</p>
             <SpareComponent
                 :speech="[
                     'Her kan du skrive inn hvor mye penger du bruker per kjøp på ulike ting. 🍔',
diff --git a/src/views/ConfigSpendingItemsView.vue b/src/views/ConfigSpendingItemsView.vue
index c983f3e..cc2a741 100644
--- a/src/views/ConfigSpendingItemsView.vue
+++ b/src/views/ConfigSpendingItemsView.vue
@@ -2,8 +2,8 @@
     <div class="flex flex-col items-center justify-center min-h-screen text-center">
         <h1 class="mb-3 text-2xl font-bold sm:text-4xl mt-0 md:mt-7">Hva bruker du mye penger på?</h1>
         <p class="text-sm mb-8 md:mb-10">Hvis du ikke finner noe som passer, kan du skrive inn egne kategorier i "Annet ..." feltet</p>
-        <div class="absolute bottom-0 md:bottom-40 left-0 w-40 h-40 md:w-52 md:h-52 ml-4">
-          <p class="text-sm font-bold mb-3 animate-bounce">Trykk på meg for hjelp ❗️</p>
+      <div class="md:absolute fixed bottom-3 md:bottom-40 left-2 w-28 h-28 md:w-40 md:h-40 lg:w-52 lg:h-52 ml-4">
+        <p class="md:text-sm text-xs font-bold mb-3 animate-bounce invisible sm:visible">Trykk på meg for hjelp ❗️</p>
             <SpareComponent
                 :speech="[
                     'Her kan du velge hva du bruker mye penger på, slik at vi kan hjelpe deg med å spare penger! 💸',
-- 
GitLab