Latest task event container minor style change + Addition of latest t…

…ask event on mobile screen (#2035)

* fix(+page): minor style change

* fix(main): fix overlapping banner and log container

src/mapper/src/lib/components/map/main.svelte

@@ -464,14 +464,14 @@
 
 	<!-- Help text for user on first load -->
 	{#if projectSetupStep === projectSetupStepEnum['task_selection']}
-		<div class="absolute top-5 w-fit bg-[#F097334D] z-10 left-[50%] translate-x-[-50%] p-1">
+		<div class="absolute top-7 w-fit bg-[#F097334D] z-10 left-[50%] translate-x-[-50%] p-1">
 			<p class="uppercase font-barlow-medium text-base">please select a task / feature for mapping</p>
 		</div>
 	{/if}
 
 	<!-- Help for drawing a new geometry -->
 	{#if displayDrawHelpText}
-		<div class="absolute top-5 w-fit bg-[#F097334D] z-10 left-[50%] translate-x-[-50%] p-1">
+		<div class="absolute top-7 w-fit bg-[#F097334D] z-10 left-[50%] translate-x-[-50%] p-1">
 			<p class="uppercase font-barlow-medium text-base">Click on the map to create a new point</p>
 		</div>
 	{/if}

src/mapper/src/routes/[projectId]/+page.svelte

@@ -118,10 +118,13 @@
 
 <!-- There is a new event to display in the top right corner -->
 {#if taskStore.latestEvent}
-	<hot-card id="notification-banner" class="absolute z-10 top-18 right-0 font-sans hidden sm:flex">
-		<b>{convertDateToTimeAgo(taskStore.latestEvent.created_at)}</b> | {taskStore.latestEvent.event}
+	<div
+		id="notification-banner"
+		class="absolute z-10 top-15 sm:top-18.8 right-0 font-sans flex bg-white text-black bg-opacity-70 text-sm sm:text-base px-1 rounded-bl-md"
+	>
+		<b class="">{convertDateToTimeAgo(taskStore.latestEvent.created_at)}</b>&nbsp;| {taskStore.latestEvent.event}
 		on task {taskStore.latestEvent.task_id} by {taskStore.latestEvent.username || 'anon'}
-	</hot-card>
+	</div>
 {/if}
 
 <!-- The main page -->