From 4200db69aa95c26ec986d63736607849da0f810e Mon Sep 17 00:00:00 2001
From: Wayne <5291640+ringoinca@users.noreply.github.com>
Date: Fri, 24 Oct 2025 17:03:25 +0200
Subject: [PATCH] Search page responsive fix

---
 .../src/routes/dashboard/search/+page.svelte  | 70 ++++++++++---------
 1 file changed, 38 insertions(+), 32 deletions(-)

diff --git a/packages/frontend/src/routes/dashboard/search/+page.svelte b/packages/frontend/src/routes/dashboard/search/+page.svelte
index 34df5df..0483aa1 100644
--- a/packages/frontend/src/routes/dashboard/search/+page.svelte
+++ b/packages/frontend/src/routes/dashboard/search/+page.svelte
@@ -201,38 +201,44 @@
 									<div use:shadowRender={_formatted.subject || hit.subject}></div>
 								{/if}
 							</CardTitle>
-							<CardDescription class="flex items-center space-x-1">
-								<span>{$t('app.search.from')}:</span>
-								{#if !isMounted}
-									<span class="bg-accent h-4 w-40 animate-pulse rounded-md"
-									></span>
-								{:else}
-									<span
-										class="inline-block"
-										use:shadowRender={_formatted.from || hit.from}
-									></span>
-								{/if}
-								<span class="mx-2">|</span>
-								<span>{$t('app.search.to')}:</span>
-								{#if !isMounted}
-									<span class="bg-accent h-4 w-40 animate-pulse rounded-md"
-									></span>
-								{:else}
-									<span
-										class="inline-block"
-										use:shadowRender={_formatted.to?.join(', ') ||
-											hit.to.join(', ')}
-									></span>
-								{/if}
-								<span class="mx-2">|</span>
-								{#if !isMounted}
-									<span class="bg-accent h-4 w-40 animate-pulse rounded-md"
-									></span>
-								{:else}
-									<span class="inline-block">
-										{new Date(hit.timestamp).toLocaleString()}
-									</span>
-								{/if}
+							<CardDescription
+								class="divide-forground flex flex-wrap items-center space-x-2 divide-x"
+							>
+								<span class="pr-2">
+									<span>{$t('app.search.from')}:</span>
+									{#if !isMounted}
+										<span class="bg-accent h-4 w-40 animate-pulse rounded-md"
+										></span>
+									{:else}
+										<span
+											class="inline-block"
+											use:shadowRender={_formatted.from || hit.from}
+										></span>
+									{/if}
+								</span>
+								<span class="pr-2">
+									<span>{$t('app.search.to')}:</span>
+									{#if !isMounted}
+										<span class="bg-accent h-4 w-40 animate-pulse rounded-md"
+										></span>
+									{:else}
+										<span
+											class="inline-block"
+											use:shadowRender={_formatted.to?.join(', ') ||
+												hit.to.join(', ')}
+										></span>
+									{/if}
+								</span>
+								<span>
+									{#if !isMounted}
+										<span class="bg-accent h-4 w-40 animate-pulse rounded-md"
+										></span>
+									{:else}
+										<span class="inline-block">
+											{new Date(hit.timestamp).toLocaleString()}
+										</span>
+									{/if}
+								</span>
 							</CardDescription>
 						</CardHeader>
 						<CardContent class="space-y-2">