Fix responsiveness + other things

dashboard/pages/analyst.vue

@@ -148,15 +148,15 @@ const { visible: pricingDrawerVisible } = usePricingDrawer()
 
             <div class="flex-[5] py-8 flex h-full flex-col items-center relative overflow-y-hidden">
 
-                <div class="flex flex-col items-center lg:mt-[20vh] px-8 lg:px-28"
+                <div class="flex flex-col items-center xl:mt-[20vh] px-8 xl:px-28"
                     v-if="currentChatMessages.length == 0">
-                    <div class="w-[7rem] lg:w-[10rem]">
+                    <div class="w-[7rem] xl:w-[10rem]">
                         <img :src="'analyst.png'" class="w-full h-full">
                     </div>
                     <div class="poppins text-[1.2rem] text-center">
                         Ask me anything about your data
                     </div>
-                    <div class="flex flex-col lg:grid lg:grid-cols-2 gap-4 mt-6">
+                    <div class="flex flex-col xl:grid xl:grid-cols-2 gap-4 mt-6">
                         <div v-for="prompt of defaultPrompts" @click="currentText = prompt"
                             class="bg-lyx-widget-light hover:bg-lyx-widget-lighter cursor-pointer p-4 rounded-lg poppins text-center whitespace-pre-wrap flex items-center justify-center text-[.9rem]">
                             {{ prompt }}
@@ -216,7 +216,7 @@ const { visible: pricingDrawerVisible } = usePricingDrawer()
                         <i class="far fa-arrow-up"></i>
                     </div>
                     <div @click="menuOpen = !menuOpen"
-                        class="bg-lyx-widget-light lg:hidden hhover:bg-lyx-widget-light cursor-pointer px-4 py-2 rounded-full">
+                        class="bg-lyx-widget-light xl:hidden hhover:bg-lyx-widget-light cursor-pointer px-4 py-2 rounded-full">
                         <i class="far fa-message"></i>
                     </div>
                 </div>
@@ -226,11 +226,11 @@ const { visible: pricingDrawerVisible } = usePricingDrawer()
 
             <div :class="{
                 'absolute': menuOpen,
-                'hidden lg:flex': !menuOpen
+                'hidden xl:flex': !menuOpen
             }" class="flex-[2] bg-lyx-background-light p-6 flex flex-col gap-4 h-full overflow-hidden">
 
                 <div class="gap-2 flex flex-col">
-                    <div class="lg:hidden absolute right-4 top-4 text-[1.5rem]">
+                    <div class="xl:hidden absolute right-6 top-2 text-[1.5rem]">
                         <i @click="menuOpen = false" class="fas fa-close cursor-pointer"></i>
                     </div>
                 </div>

dashboard/pages/events.vue

@@ -19,7 +19,7 @@ const eventsData = await useFetch(`/api/data/count`, { headers: useComputedHeade
     <div class="w-full h-full overflow-y-auto pb-20 p-6 gap-6 flex flex-col">
 
 
-        <LyxUiCard class="w-full flex justify-between items-center">
+        <LyxUiCard class="w-full flex justify-between items-center lg:flex-row flex-col gap-6 lg:gap-0">
             <div class="flex flex-col gap-1">
                 <div>
                     Total events: {{ eventsData.data.value?.[0]?.count || '0' }}
@@ -40,9 +40,9 @@ const eventsData = await useFetch(`/api/data/count`, { headers: useComputedHeade
             <BarCardEvents :key="refreshKey"></BarCardEvents>
         </div>
 
-        <div class="flex gap-6 flex-col xl:flex-row h-full">
+        <div class="flex gap-6 flex-col xl:flex-row xl:h-full">
 
-            <CardTitled :key="refreshKey" class="p-4 flex-[4] w-full h-full" title="Events"
+            <CardTitled :key="refreshKey" class="p-4 xl:flex-[4] w-full h-full" title="Events"
                 sub="Events stacked bar chart.">
                 <template #header>
                     <SelectButton @changeIndex="eventsStackedSelectIndex = $event"
@@ -55,7 +55,7 @@ const eventsData = await useFetch(`/api/data/count`, { headers: useComputedHeade
                 </div>
             </CardTitled>
 
-            <CardTitled :key="refreshKey" class="p-4 flex-[2] w-full h-full" title="Top events"
+            <CardTitled :key="refreshKey" class="p-4 xl:flex-[2] w-full h-full" title="Top events"
                 sub="Displays key events.">
                 <DashboardEventsChart class="w-full"> </DashboardEventsChart>
             </CardTitled>

dashboard/pages/index.vue

@@ -97,8 +97,11 @@ const showDashboard = computed(() => project.value && firstInteraction.data.valu
             Create your first project...
         </div>
 
-        <div v-if="justLogged" class="text-[2rem]">
-            The page will refresh soon
+        <div v-if="justLogged" class="text-[2rem] w-full h-full flex items-center justify-center">
+            <div
+                class="backdrop-blur-[1px] z-[20] left-0 top-0 w-full h-full flex items-center justify-center font-bold rockmann absolute">
+                <i class="fas fa-spinner text-[2rem] text-[#727272] animate-[spin_1s_linear_infinite] duration-500"></i>
+            </div>
         </div>
 
     </div>

dashboard/pages/payment_ok.vue

@@ -2,8 +2,6 @@
 
 definePageMeta({ layout: 'none' });
 
-const activeProject = useActiveProject();
-
 </script>
 
 

dashboard/pages/settings.vue

@@ -13,8 +13,9 @@ const items = [
 </script>
 
 <template>
-    <div class="px-10 py-8 h-dvh overflow-y-auto hide-scrollbars">
-        <div class="poppins font-semibold text-[1.3rem]"> Settings </div>
+    <div class="lg:px-10 lg:py-8 h-dvh overflow-y-auto overflow-x-hidden hide-scrollbars">
+        
+        <div class="poppins font-semibold text-[1.3rem] lg:px-0 px-4 lg:py-0 py-4"> Settings </div>
 
         <CustomTab :items="items" class="mt-8">
             <template #general>