fix: fixed grid for challenges modal

src/components/GeneratedChallengesModal.vue

@@ -3,7 +3,7 @@
         v-if="generatedChallenges.length > 0"
         class="fixed inset-0 bg-gray-300 bg-opacity-75 flex justify-center items-center"
     >
-        <div class="relative bg-white pt-10 p-6 rounded-lg shadow-xl" style="width: 40rem">
+        <div class="relative bg-white pt-10 p-4 rounded-lg shadow-xl" style="width: 40rem">
             <button
                 @click="closeModal"
                 class="absolute top-0 right-0 m-2 text-gray-600 hover:text-gray-800"
@@ -26,10 +26,10 @@
             <div class="text-center font-bold text-3xl mb-4 mt-2">
                 Personlig tilpassede spareutfordringer:
             </div>
-            <div class="grid grid-cols-7 gap-4 p-3 border-b-2">
-                <span class="font-bold col-span-2">Tittel</span>
-                <span class="font-bold col-span-1">Målsum</span>
-                <span class="font-bold col-span-2">Frist</span>
+            <div class="grid grid-cols-7 sm:grid-cols-9 gap-2 p-3 pb-1 border-b-2">
+                <span class="font-bold col-span-2 md:col-span-2 sm:text-lg pt-1 mb-0">Tittel</span>
+                <span class="font-bold col-span-2 md:col-span-2 sm:text-lg pt-1 mb-0">Målsum</span>
+                <span class="font-bold col-span-2 md:col-span-1 sm:text-lg pt-1 pr-1 md:pr-3 mb-0">Frist</span>
                 <span class="col-span-2"></span>
             </div>
             <div class="space-y-2">
@@ -37,21 +37,21 @@
                     v-for="(challenge, index) in generatedChallenges"
                     :key="challenge.id"
                     :class="{ 'bg-gray-100': index % 2 === 0 }"
-                    class="grid grid-cols-7 gap-4 items-center border p-3 rounded"
+                    class="grid grid-cols-7 md:grid-cols-7 sm:grid-cols-2 lg:grid-cols-7 gap-4 items-center border p-3 rounded mt-[-8px]"
                 >
-                    <span class="break-words col-span-2 font-bold">{{ challenge.title }}</span>
-                    <span class="col-span-1 font-bold">{{ challenge.target }}</span>
-                    <span class="col-span-2 font-bold">{{ challenge.due }}</span>
-                    <div class="flex items-center justify-end space-x-2 col-span-2">
+                    <span class="break-words col-span-2 md:col-span-1 lg:col-span-2 sm:text-lg" >{{ challenge.title }}</span>
+                    <span class="col-span-2 md:col-span-2 lg:col-span-1 sm:text-lg">{{ challenge.target }}</span>
+                    <span class="col-span-2 md:col-span-1 lg:col-span-2 sm:text-lg">{{ challenge.due }}</span>
+                    <div class="col-span-7 sm:col-start-3 sm:col-span-2 md:col-span-2 lg:col-span-2 flex items-center justify-end space-x-2">
                         <button
                             @click="declineChallenge(challenge.id)"
-                            class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-1 px-4"
+                            class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-1 px-4 "
                         >
                             Skip
                         </button>
                         <button
                             @click="acceptChallenge(challenge.id)"
-                            class="text-white font-bold py-1 px-4"
+                            class="text-white font-bold py-1 px-4 "
                         >
                             Godta
                         </button>
@@ -62,6 +62,7 @@
     </div>
 </template>
 
+
 <script setup>
 import { ref, onMounted } from 'vue'
 import authInterceptor from '@/services/authInterceptor'