ui: compact the "will count for" detected-awards list in QSO details

In the QSO details Awards tab, the detected-refs line grew tall (DXCC/WAS/WAZ/
WAC/WPX/USA-CA… each with its full name), squishing the AwardRefSelector above so
you couldn't see the selected awards. Show just CODE@REF chips (full name on
hover), cap the block height with overflow scroll, and add a separator. Changelog 0.21.1.

frontend/src/components/DetailsPanel.tsx

@@ -306,11 +306,11 @@ export function DetailsPanel({ callsign, prefix, operatorGrid, remoteGrid, detai
             heightClass="flex-1 min-h-0"
           />
           {detected.length > 0 && (
-            <div className="mt-2 text-[11px] text-muted-foreground shrink-0">
+            <div className="mt-2 text-[11px] text-muted-foreground shrink-0 max-h-14 overflow-y-auto leading-snug border-t border-border/50 pt-1.5">
               <span className="font-medium text-foreground/70">{t('detp.detected')}</span>{' '}
               {detected.map((r) => (
-                <span key={`${r.code}@${r.ref}`} className="inline-block mr-2 font-mono">
-                  {r.code}{r.ref ? `@${r.ref}` : ''}{r.name ? <span className="text-muted-foreground/70"> {r.name}</span> : null}
+                <span key={`${r.code}@${r.ref}`} className="inline-block mr-1.5 font-mono whitespace-nowrap" title={r.name ?? ''}>
+                  <span className="text-foreground/80">{r.code}{r.ref ? `@${r.ref}` : ''}</span>
                 </span>
               ))}
             </div>