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 ? ( {search?.query ? (
<div className="mb-5"> <div className="mb-5">
<p className="text-sm text-muted-foreground">Results for</p> <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"> <p className="mt-1 text-xs text-muted-foreground">
{search.results.length} result{search.results.length === 1 ? "" : "s"} {search.results.length} result{search.results.length === 1 ? "" : "s"}
{search.latencyMs ? ` • ${search.latencyMs} ms` : ""} {search.latencyMs ? ` • ${search.latencyMs} ms` : ""}
@@ -199,7 +199,7 @@ export function SearchResultsPanel({
href={citation.href} href={citation.href}
target={openLinksInNewTab ? "_blank" : undefined} target={openLinksInNewTab ? "_blank" : undefined}
rel={openLinksInNewTab ? "noreferrer" : 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> <span className="mr-1 rounded bg-violet-900/70 px-1 py-0.5 text-[10px] text-violet-100">{citation.index}</span>
{citation.label} {citation.label}
@@ -229,19 +229,19 @@ export function SearchResultsPanel({
index === activeResultIndex && "border-violet-300 ring-1 ring-violet-300/80" 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 <a
href={result.url} href={result.url}
target={openLinksInNewTab ? "_blank" : undefined} target={openLinksInNewTab ? "_blank" : undefined}
rel={openLinksInNewTab ? "noreferrer" : 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} {result.title || result.url}
</a> </a>
{(result.publishedDate || result.author) && ( {(result.publishedDate || result.author) && (
<p className="mt-1 text-xs text-muted-foreground">{[result.publishedDate, result.author].filter(Boolean).join(" • ")}</p> <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> </article>
); );
})} })}