fix(akquise): lange Projekttitel brechen um

Die Titelspalte hatte truncate ohne feste Breite. In der automatischen
Tabellenbreite hat das nichts abgeschnitten, sondern die Zelle
ausgedehnt - der Titel lief sichtbar in die Spalte "Berater". Jetzt hat
die Spalte eine feste Breite und der Titel bricht um (wrap-anywhere,
damit auch Titel ohne Leerzeichen brechen). Gleiches im Papierkorb.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sascha Wolf
2026-09-10 08:54:24 +02:00
co-authored by Claude Opus 5
parent f678e988ac
commit 699f62930a
3 changed files with 10 additions and 10 deletions
+1 -1
View File
@@ -313,7 +313,7 @@ Warum genau diese Konstanten festgelegt sind, steht in
| `components/dashboard/dashboardUi.tsx` | `useCountUp()` (Zahl läuft hoch, respektiert `prefers-reduced-motion`), `StatCard`, `SeriesChart`, `BarList`, `Panel` - von Hand statt Diagrammbibliothek | | `components/dashboard/dashboardUi.tsx` | `useCountUp()` (Zahl läuft hoch, respektiert `prefers-reduced-motion`), `StatCard`, `SeriesChart`, `BarList`, `Panel` - von Hand statt Diagrammbibliothek |
| `components/acquisition/Acquisitions.tsx` | Akquise und Archiv (`view`); Suche, Sortierung, Übernahme, Löschen, Wiederherstellen. Das Formular steht im Archiv nur beim Bearbeiten - ohne diesen Zweig blieb der Stift dort ohne Wirkung | | `components/acquisition/Acquisitions.tsx` | Akquise und Archiv (`view`); Suche, Sortierung, Übernahme, Löschen, Wiederherstellen. Das Formular steht im Archiv nur beim Bearbeiten - ohne diesen Zweig blieb der Stift dort ohne Wirkung |
| `components/acquisition/AcquisitionForm.tsx` | Eingabe über der Liste; behält Datum, Anbieter, Kanal und Berater für den nächsten Eintrag | | `components/acquisition/AcquisitionForm.tsx` | Eingabe über der Liste; behält Datum, Anbieter, Kanal und Berater für den nächsten Eintrag |
| `components/acquisition/AcquisitionTable.tsx` | die Liste; `safeLink()` lässt nur http(s) zum Link werden. Der Pfeil zurück in den Eingang erscheint nur, wenn `onReopen` gesetzt ist - im Eingang gibt es nichts zurückzuholen | | `components/acquisition/AcquisitionTable.tsx` | die Liste; `safeLink()` lässt nur http(s) zum Link werden. Der Pfeil zurück in den Eingang erscheint nur, wenn `onReopen` gesetzt ist - im Eingang gibt es nichts zurückzuholen. Die Titelspalte ist auf 28rem festgelegt und bricht um (`wrap-anywhere`), lange Titel liefen sonst in die Spalte „Berater“ |
| `components/acquisition/AcquisitionTrash.tsx` | Papierkorb der Akquise: zurückholen, endgültig löschen, leeren. Die Meldung nach dem Zurückholen nennt das Ziel (Eingang oder Archiv) - das Funddatum bleibt, also landet ein alter Fund im Archiv | | `components/acquisition/AcquisitionTrash.tsx` | Papierkorb der Akquise: zurückholen, endgültig löschen, leeren. Die Meldung nach dem Zurückholen nennt das Ziel (Eingang oder Archiv) - das Funddatum bleibt, also landet ein alter Fund im Archiv |
| `components/acquisition/acquisitionUi.tsx` | `fieldClass` (abgesetzte Felder) und `OptionSelect` - zeigt einen Wert, der nicht mehr in der Liste steht, als solchen; `alwaysOffer` hält den eigenen Namen für *Von* immer wählbar. *Anbieter* nutzt es nicht: Freitext mit `<datalist>`. Dazu `ConsultantSelect` (mehrere Berater: Auswahlfeld hängt an, Plaketten nehmen weg) und `ConsultantList` für die Anzeige in der Liste | | `components/acquisition/acquisitionUi.tsx` | `fieldClass` (abgesetzte Felder) und `OptionSelect` - zeigt einen Wert, der nicht mehr in der Liste steht, als solchen; `alwaysOffer` hält den eigenen Namen für *Von* immer wählbar. *Anbieter* nutzt es nicht: Freitext mit `<datalist>`. Dazu `ConsultantSelect` (mehrere Berater: Auswahlfeld hängt an, Plaketten nehmen weg) und `ConsultantList` für die Anzeige in der Liste |
| `components/settings/AcquisitionSettings.tsx` | Reiter *Einstellungen → Akquise*: die vier Auswahllisten pflegen | | `components/settings/AcquisitionSettings.tsx` | Reiter *Einstellungen → Akquise*: die vier Auswahllisten pflegen |
@@ -184,23 +184,23 @@ export const AcquisitionTable: React.FC<AcquisitionTableProps> = ({
)} )}
</td> </td>
<td className="max-w-sm px-4 py-3"> <td className="w-[28rem] max-w-[28rem] px-4 py-3 align-top">
{link ? ( {link ? (
<a <a
href={link} href={link}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
title={`${entry.title} - öffnet ${link}`} title={`${entry.title} - öffnet ${link}`}
className="inline-flex items-baseline gap-1 text-sm font-bold text-brand-700 underline decoration-brand-300 underline-offset-2 transition hover:text-brand-800 hover:decoration-brand-600" className="text-sm font-bold text-brand-700 underline decoration-brand-300 underline-offset-2 transition hover:text-brand-800 hover:decoration-brand-600 wrap-anywhere"
> >
<span className="truncate">{entry.title}</span> {entry.title}
<span aria-hidden>↗</span> <span aria-hidden className="ml-1 whitespace-nowrap">↗</span>
</a> </a>
) : ( ) : (
<span className="text-sm font-bold text-ink-900">{entry.title}</span> <span className="text-sm font-bold text-ink-900 wrap-anywhere">{entry.title}</span>
)} )}
{extraParts.length > 0 && ( {extraParts.length > 0 && (
<p className="mt-0.5 truncate text-[11px] text-ink-400">{extraParts.join(' · ')}</p> <p className="mt-0.5 text-[11px] text-ink-400 wrap-anywhere">{extraParts.join(' · ')}</p>
)} )}
{returned && ( {returned && (
<span <span
@@ -217,10 +217,10 @@ export const AcquisitionTrash: React.FC<AcquisitionTrashProps> = ({ reload }) =>
return ( return (
<tr key={entry.id} className="transition hover:bg-ink-50"> <tr key={entry.id} className="transition hover:bg-ink-50">
<td className="max-w-sm px-4 py-3"> <td className="w-[24rem] max-w-[24rem] px-4 py-3 align-top">
<p className="truncate text-sm font-bold text-ink-900">{entry.title}</p> <p className="text-sm font-bold text-ink-900 wrap-anywhere">{entry.title}</p>
{extraParts.length > 0 && ( {extraParts.length > 0 && (
<p className="mt-0.5 truncate text-[11px] text-ink-400"> <p className="mt-0.5 text-[11px] text-ink-400 wrap-anywhere">
{extraParts.join(' · ')} {extraParts.join(' · ')}
</p> </p>
)} )}