Left-align search results, widen column, move meta to right rail (PAP-3468)

The search results column drops `mx-auto` (now flush left) and the cap
goes from 680px to 960px — long titles wrap inside the column instead of
stretching across the full page width. Each issue row gains a right rail
that holds the assignee, timestamp, and 88×88 thumbnail (stacked); the
left content column owns the identifier, title, and snippet excerpts and
wraps freely without truncation. Mobile keeps the inline assignee/time
strip below the snippets.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

ui/src/components/search/SearchResultRow.tsx

@@ -118,6 +118,7 @@ function SearchResultRowImpl({
   const titleHighlights = result.snippets.find((snippet) => snippet.field === "title")?.highlights;
   const bodySnippets = result.snippets.filter((snippet) => snippet.field !== "title").slice(0, 2);
   const previewImageUrl = result.previewImageUrl;
+  const hasRightRail = previewImageUrl || assigneeName || updated;
 
   return (
     <Link
@@ -130,7 +131,7 @@ function SearchResultRowImpl({
         <StatusIcon status={issue.status} />
       </div>
       <div className="min-w-0 flex-1">
-        <div className="flex min-w-0 items-baseline gap-x-2.5">
+        <div className="flex min-w-0 flex-wrap items-baseline gap-x-2.5 gap-y-1">
           {issue.identifier ? (
             <span className="shrink-0 font-mono text-xs text-muted-foreground tabular-nums">
               {issue.identifier}
@@ -139,12 +140,8 @@ function SearchResultRowImpl({
           <HighlightedText
             text={issue.title}
             highlights={titleHighlights}
-            className="line-clamp-2 min-w-0 flex-1 text-sm font-medium leading-snug text-foreground"
+            className="min-w-0 flex-1 text-sm font-medium leading-snug text-foreground"
           />
-          <div className="ml-2 hidden shrink-0 items-center gap-2.5 text-xs text-muted-foreground sm:flex">
-            {assigneeName ? <Identity name={assigneeName} size="sm" /> : null}
-            {updated ? <span className="tabular-nums">{updated}</span> : null}
-          </div>
         </div>
         {bodySnippets.map((snippet, index) => (
           <SnippetLine
@@ -156,19 +153,31 @@ function SearchResultRowImpl({
             multiline
           />
         ))}
-        <div className="mt-1.5 flex items-center gap-2 text-xs text-muted-foreground sm:hidden">
-          {assigneeName ? <span className="truncate">{assigneeName}</span> : null}
-          {updated ? <span className="ml-auto tabular-nums">{updated}</span> : null}
-        </div>
+        {hasRightRail ? (
+          <div className="mt-1.5 flex items-center gap-2 text-xs text-muted-foreground sm:hidden">
+            {assigneeName ? <span className="truncate">{assigneeName}</span> : null}
+            {updated ? <span className="ml-auto tabular-nums">{updated}</span> : null}
+          </div>
+        ) : null}
       </div>
-      {previewImageUrl ? (
-        <img
-          src={previewImageUrl}
-          alt=""
-          loading="lazy"
-          decoding="async"
-          className="ml-2 mt-0.5 h-[88px] w-[88px] shrink-0 rounded-md border border-border bg-muted object-cover"
-        />
+      {hasRightRail ? (
+        <div className="ml-2 hidden shrink-0 flex-col items-end gap-2 sm:flex">
+          {assigneeName || updated ? (
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              {assigneeName ? <Identity name={assigneeName} size="sm" /> : null}
+              {updated ? <span className="tabular-nums">{updated}</span> : null}
+            </div>
+          ) : null}
+          {previewImageUrl ? (
+            <img
+              src={previewImageUrl}
+              alt=""
+              loading="lazy"
+              decoding="async"
+              className="h-[88px] w-[88px] shrink-0 rounded-md border border-border bg-muted object-cover"
+            />
+          ) : null}
+        </div>
       ) : null}
     </Link>
   );

ui/src/pages/Search.tsx

@@ -577,7 +577,7 @@ function SearchTabContent({
   if (!hasResults) return null;
 
   return (
-    <div className="mx-auto flex w-full max-w-[680px] flex-col px-2 sm:px-4" data-testid="search-results">
+    <div className="flex w-full max-w-[960px] flex-col px-2 sm:px-4" data-testid="search-results">
       <div className="flex items-center justify-between py-2 text-[11px] uppercase tracking-wide text-muted-foreground">
         <span>
           {totalResults === 1 ? "1 result" : `${totalResults} results`} · sorted by relevance

ui/storybook/stories/search.stories.tsx

@@ -266,7 +266,7 @@ function SearchPagePreview({
       </div>
 
       {state === "results" ? (
-        <div className="mx-auto flex w-full max-w-[680px] flex-col px-2 sm:px-4">
+        <div className="flex w-full max-w-[960px] flex-col px-2 sm:px-4">
           <div className="flex items-center justify-between py-2 text-[11px] uppercase tracking-wide text-muted-foreground">
             <span>{response.results.length} results · sorted by relevance</span>
           </div>
@@ -577,7 +577,7 @@ function SearchStories() {
             <div className="paperclip-story__label">Search result row</div>
             <h2 className="mt-1 text-lg font-semibold">Issue, agent, project rows</h2>
           </div>
-          <div className="mx-auto flex w-full max-w-[680px] flex-col gap-y-1">
+          <div className="flex w-full max-w-[960px] flex-col gap-y-1">
             {fixtureResults.map((result) => (
               <SearchResultRow
                 key={result.id}