refac: styling

Co-Authored-By: Jun Siang Cheah <me@jscheah.me>

src/lib/components/chat/Chat.svelte

@@ -1008,25 +1008,27 @@
 		/>
 
 		{#if $banners.length > 0}
-			<div class="flex flex-col gap-1">
-				{#each $banners as banner}
-					<Banner
-						{banner}
-						on:dismiss={(e) => {
-							const bannerId = e.detail;
-
-							localStorage.setItem(
-								'dismissedBannerIds',
-								JSON.stringify(
-									[
-										bannerId,
-										...JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]')
-									].filter((id) => $banners.find((b) => b.id === id))
-								)
-							);
-						}}
-					/>
-				{/each}
+			<div class="absolute top-16 w-full {$showSidebar ? 'md:max-w-[calc(100%-260px)]' : ''}">
+				<div class=" flex flex-col gap-1 w-full">
+					{#each $banners.filter( (b) => (b.dismissible ? !JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]').includes(b.id) : true) ) as banner}
+						<Banner
+							{banner}
+							on:dismiss={(e) => {
+								const bannerId = e.detail;
+
+								localStorage.setItem(
+									'dismissedBannerIds',
+									JSON.stringify(
+										[
+											bannerId,
+											...JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]')
+										].filter((id) => $banners.find((b) => b.id === id))
+									)
+								);
+							}}
+						/>
+					{/each}
+				</div>
 			</div>
 		{/if}
 

src/lib/components/common/Banner.svelte

@@ -36,17 +36,17 @@
 	});
 </script>
 
-{#if mounted}
-	{#if !dismissed}
+{#if !dismissed}
+	{#if mounted}
 		<div
-			class=" top-0 left-0 right-0 p-2 mx-4 px-3 flex justify-center items-center relative rounded-xl border dark:border-gray-800 text-gray-800 dark:text-gary-100 bg-white dark:bg-gray-900 backdrop-blur-xl"
-			transition:fade={{ delay: 0, duration: 300 }}
+			class=" top-0 left-0 right-0 p-2 mx-4 px-3 flex justify-center items-center relative rounded-xl border border-gray-100 dark:border-gray-850 text-gray-800 dark:text-gary-100 bg-white dark:bg-gray-900 backdrop-blur-xl z-40"
+			transition:fade={{ delay: 100, duration: 300 }}
 		>
 			<div class=" flex flex-col md:flex-row md:items-center flex-1 text-sm w-fit gap-1.5">
 				<div class="flex justify-between self-start">
 					<div
 						class=" text-xs font-black {classNames[banner.type] ??
-							classNames['info']}  w-fit px-2 rounded uppercase"
+							classNames['info']}  w-fit px-2 rounded uppercase line-clamp-1 mr-0.5"
 					>
 						{banner.type}
 					</div>
@@ -110,14 +110,13 @@
 					</div>
 				</div>
 			{/if}
-			<div class="flex h-full justify-start">
+			<div class="flex self-start">
 				{#if banner.dismissible}
 					<button
 						on:click={() => {
 							dismiss(banner.id);
 						}}
-						class="mt-[-2.5px] ml-1.5 mr-1 text-gray-400 dark:hover:text-white h-2 mb-auto"
-						>&times;</button
+						class=" -mt-[3px] ml-1.5 mr-1 text-gray-400 dark:hover:text-white h-1">&times;</button
 					>
 				{/if}
 			</div>

src/routes/(app)/+layout.svelte

@@ -85,12 +85,7 @@
 					documents.set(await getDocs(localStorage.token));
 				})(),
 				(async () => {
-					let _banners = await getBanners(localStorage.token);
-					const dismissedBannerIds = JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]');
-					_banners = _banners.filter((banner) =>
-						banner.dismissible ? !dismissedBannerIds.includes(banner.id) : true
-					);
-					banners.set(_banners);
+					banners.set(await getBanners(localStorage.token));
 				})(),
 				(async () => {
 					tags.set(await getAllChatTags(localStorage.token));