Simplify instance details and clarify diagnostics

src/lib/ui/components/MatchHistory.svelte

@@ -50,7 +50,7 @@
 
 <Card padding="lg">
     <h2>Match history</h2>
-    <p>Newest matches first. Open a completed match to see its player results. Unique players are counted across all match reports. — means the start or end wasn’t recorded, or the match is still in progress.</p>
+
     {#if error}
         <div role="alert">{error} <Button onclick={() => refresh(server, limit)}>Retry</Button></div>
     {/if}
@@ -63,22 +63,21 @@
         <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
         <div class="table-scroll" tabindex="0" role="region" aria-label="Match history">
             <table>
-                <thead><tr><th>Started</th><th>Ended</th>{#if server === undefined}<th>Server</th>{/if}<th>Map</th><th>Status</th><th>Players at start</th><th>Unique players</th><th>Players at end</th><th>Game time</th><th>Final round</th></tr></thead>
+                <thead><tr><th>Started</th>{#if server === undefined}<th>Server</th>{/if}<th>Map</th><th>Status</th><th>Unique players</th><th>Duration</th><th>Final round</th></tr></thead>
                 <tbody>
                     {#each matches as match (match.id)}
                         <tr class:completed={match.status === 'completed'}>
-                            <td><time datetime={match.startedAt}>{$timeFormat.dateTime(match.startedAt)}</time></td>
-                            <td>{#if match.endedAt}<time datetime={match.endedAt}>{$timeFormat.dateTime(match.endedAt)}</time>{:else}—{/if}</td>
+                            <td><time datetime={match.startedAt} title={$timeFormat.dateTime(match.startedAt)}>{$timeFormat.period(match.startedAt)}</time></td>
                             {#if server === undefined}<td><HistoricalServerIdentity name={match.server} deletedAt={match.server_deleted_at} href={`/servers/${encodeURIComponent(match.server)}?tab=matches`} /></td>{/if}
                             <td>
                                 {#if match.status === 'completed'}
                                     <a class="match-link" href={contextHref(`/matches/${match.id}`, $page.url)} aria-label={`View ${match.map} match from ${$timeFormat.dateTime(match.startedAt)}`}>
-                                        {match.map}<small>View match →</small>
+                                        {match.map}
                                     </a>
                                 {:else}{match.map}{/if}
                             </td>
                             <td>{match.status === 'active' ? 'In progress' : match.status === 'completed' ? 'Completed' : 'Interrupted'}</td>
-                            <td>{match.startPlayers ?? '—'}</td><td>{match.uniquePlayers}</td><td>{match.endPlayers ?? '—'}</td>
+                            <td>{match.uniquePlayers}</td>
                             <td>{match.durationMs === null ? '—' : formatDuration(match.durationMs)}</td><td>{match.finalRound ?? '—'}</td>
                         </tr>
                     {/each}
@@ -88,6 +87,7 @@
         <ListFooter total={Math.min(total, 10000)} bind:limit onchange={saveContext} label="matches" />
         {#if total > 10000}<p>Showing the latest 10,000 matches.</p>{/if}
     {/if}
+    <details><summary>About match history</summary><p>Newest matches first. Unique players are counted across all reports. — means a value was not recorded or the match is still in progress. Open a completed match for exact timestamps and player counts at the start and end.</p></details>
 </Card>
 
 <style>
@@ -103,5 +103,6 @@
     .match-link { display: block; color: var(--accent-primary-hover); text-decoration: none; }
     .match-link:hover { text-decoration: underline; }
     .match-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
-    .match-link small { display: block; margin-top: var(--space-1); font-size: var(--text-xs); }
+    details { margin-top: 12px; font-size: var(--text-xs); color: var(--text-secondary); }
+    summary { cursor: pointer; }
 </style>