Fit the run history into its space

Two columns showed the same long date, the trigger printed a whole mail
address and the error text pushed the table past its container. Dates are
short now, the trigger reads Verwaltung or Zeitsteuerung with the detail in
the tooltip, and long cells clamp instead of stretching.

src/app/admin/settings/page.tsx

@@ -8,7 +8,7 @@ import { cellClass, headCellClass } from '~/components/admin/styles'
 import { SectionLabel } from '~/components/ui/SectionLabel'
 import { Scroller } from '~/components/ui/Scroller'
 import { listReportRuns } from '~/data/repositories/settings'
-import { longDateTimeFormat } from '~/lib/dates'
+import { dateTimeFormat, dayMonthFormat } from '~/lib/dates'
 import { readSlackConfig } from '~/lib/report-settings'
 import { requireAdmin } from '~/lib/auth-guards'
 
@@ -21,6 +21,18 @@ export async function generateMetadata(): Promise<Metadata> {
 	return { title: `${t('title')} - ${app('name')}` }
 }
 
+function trigger(value: string): { label: string, title: string } {
+	if (value.startsWith('admin:')) {
+		return { label: 'Verwaltung', title: value.slice('admin:'.length) }
+	}
+
+	if (value === 'cron') {
+		return { label: 'Zeitsteuerung', title: value }
+	}
+
+	return { label: value, title: value }
+}
+
 function resultKey(run: { sent: boolean, detail: string | null }): string {
 	if (run.sent) {
 		return 'sent'
@@ -71,7 +83,7 @@ export default async function AdminSettingsPage() {
 					<AdminNotice>{t('historyEmpty')}</AdminNotice>
 				) : (
 					<Scroller options={{ overflow: { y: 'hidden' } }}>
-						<table className="w-full min-w-3xl border-collapse text-left">
+						<table className="w-full border-collapse text-left">
 							<thead>
 								<tr>
 									<th scope="col" className={headCellClass}>{t('columns.when')}</th>
@@ -87,22 +99,31 @@ export default async function AdminSettingsPage() {
 								{runs.map(run => (
 									<tr key={run.id}>
 										<td className={`${cellClass} whitespace-nowrap font-mono text-micro`}>
-											{format.dateTime(run.createdAt, longDateTimeFormat)}
+											{format.dateTime(run.createdAt, dateTimeFormat)}
 										</td>
 										<td className={`${cellClass} whitespace-nowrap font-mono text-micro`}>
-											{format.dateTime(run.fromAt, longDateTimeFormat)}
+											{format.dateTime(run.fromAt, dayMonthFormat)}
+											{' bis '}
+											{format.dateTime(run.toAt, dayMonthFormat)}
 										</td>
 										<td className={`${cellClass} whitespace-nowrap font-mono text-micro tabular-nums`}>
 											{run.total}
 										</td>
 										<td className={cellClass}>
+											<span
+												title={run.projects.map(project => `${project.name} (${project.count})`).join(', ')}
+												className="block max-w-56 truncate"
+											>
 												{run.projects.length === 0
 													? '-'
 													: run.projects.map(project => `${project.name} (${project.count})`).join(', ')}
+											</span>
 										</td>
 										<td className={`${cellClass} whitespace-nowrap`}>{t(`results.${resultKey(run)}`)}</td>
-										<td className={`${cellClass} whitespace-nowrap font-mono text-micro`}>{run.trigger}</td>
 										<td className={`${cellClass} whitespace-nowrap`}>
+											<span title={trigger(run.trigger).title}>{trigger(run.trigger).label}</span>
+										</td>
+										<td className={`${cellClass} max-w-72`}>
 											{run.deletedAt
 												? t('messageDeleted')
 												: run.sent && canDelete

src/lib/dates.ts

@@ -23,3 +23,5 @@ export const longDateTimeFormat = {
 export const monthYearFormat = { month: 'long', year: 'numeric', timeZone: 'UTC' } as const
 
 export const monthOnlyFormat = { month: 'long', timeZone: 'UTC' } as const
+
+export const shortTimeFormat = { hour: '2-digit', minute: '2-digit' } as const