From a5650e8a1bf3a8608875e7cbd42f2a8efe33628c Mon Sep 17 00:00:00 2001
From: James Magahern <james@magahern.com>
Date: Sat, 14 Feb 2026 22:19:18 -0800
Subject: [PATCH] Truncate urls in search results on narrow viewports

---
 web/src/components/search/search-results-panel.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/components/search/search-results-panel.tsx b/web/src/components/search/search-results-panel.tsx
index a7ecedd..dc11c70 100644
--- a/web/src/components/search/search-results-panel.tsx
+++ b/web/src/components/search/search-results-panel.tsx
@@ -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>
           );
         })}