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;
+			<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}
+								localStorage.setItem(
+									'dismissedBannerIds',
+									JSON.stringify(
+										[
+											bannerId,
+											...JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]')
+										].filter((id) => $banners.find((b) => b.id === id))
+									)
+								);
+							}}
+						/>
+					{/each}
+				</div>
 			</div>
 		{/if}