buzzert/Sybil-2
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Truncate urls in search results on narrow viewports

Browse Source
This commit is contained in:
James Magahern
2026-02-14 22:19:18 -08:00
parent fb306e154a
commit a5650e8a1b
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/components/search/search-results-panel.tsx
View File

@@ -139,7 +139,7 @@ export function SearchResultsPanel({
{search?.query ? (
<div className="mb-5">
<p className="text-sm text-muted-foreground">Results for</p>
<h2 className="mt-1 text-xl font-semibold">{search.query}</h2>
<h2 className="mt-1 break-words text-xl font-semibold">{search.query}</h2>
<p className="mt-1 text-xs text-muted-foreground">
{search.results.length} result{search.results.length === 1 ? "" : "s"}
{search.latencyMs ? ` • ${search.latencyMs} ms` : ""}
@@ -199,7 +199,7 @@ export function SearchResultsPanel({
href={citation.href}
target={openLinksInNewTab ? "_blank" : undefined}
rel={openLinksInNewTab ? "noreferrer" : undefined}
className="rounded-md border border-violet-400/40 px-2 py-1 text-xs text-violet-200 hover:bg-violet-500/20"
className="max-w-full truncate rounded-md border border-violet-400/40 px-2 py-1 text-xs text-violet-200 hover:bg-violet-500/20"
>
<span className="mr-1 rounded bg-violet-900/70 px-1 py-0.5 text-[10px] text-violet-100">{citation.index}</span>
{citation.label}
@@ -229,19 +229,19 @@ export function SearchResultsPanel({
index === activeResultIndex && "border-violet-300 ring-1 ring-violet-300/80"
)}
>
<p className="text-xs text-violet-300/85">{formatHost(result.url)}</p>
<p className="truncate text-xs text-violet-300/85">{formatHost(result.url)}</p>
<a
href={result.url}
target={openLinksInNewTab ? "_blank" : undefined}
rel={openLinksInNewTab ? "noreferrer" : undefined}
className="mt-1 block text-lg font-medium text-violet-300 hover:underline"
className="mt-1 block break-words text-lg font-medium text-violet-300 hover:underline"
>
{result.title || result.url}
</a>
{(result.publishedDate || result.author) && (
<p className="mt-1 text-xs text-muted-foreground">{[result.publishedDate, result.author].filter(Boolean).join(" • ")}</p>
)}
{result.url ? <p className="mt-2 text-sm leading-6 text-violet-100/90">{result.url}</p> : null}
{result.url ? <p className="mt-2 break-all text-sm leading-6 text-violet-100/90">{result.url}</p> : null}
</article>
);
})}