fix(startseite): durchgehendes Basel-Panorama, Kreise ohne Stühle

Vier Korrekturen aus der Nachprüfung.

**Naht in der linken Fensterfront.** Sie stammte von zwei getrennten
Fotoflächen — vorne und links. Eine Stossstelle lässt sich nicht wegblenden;
sie verschwindet nur, wenn es keine zwei Bilder mehr gibt. Die Kulisse ist
jetzt eine gekrümmte Fläche mit einer einzigen Panoramadatei: auf einem
durchgehenden Zylinder ist eine Naht geometrisch unmöglich.

Das Panorama entsteht einmalig aus den beiden Referenzfotos
(`scripts/build-basel-panorama.mjs`), jede Quelle genau einmal — kein Kacheln,
kein Spiegeln. Das gute Motiv vom Tischende bleibt in Ausschnitt und Farbe
unverändert und steht weiterhin in der Frontscheibe; die Panoramaaufnahme setzt
es nach links fort, helligkeitsangeglichen und über 320 Pixel überblendet. Aus
der Fortsetzung wird nur der Abschnitt östlich des Münsters verwendet — beide
Vorlagen zeigen es, nebeneinander stünde es zweimal im Bild. Himmel und Wasser
sind aus den Randzeilen gestreckt, damit oben und unten keine Bildgrenze bleibt.

**Stühle und Körper entfernt.** Sitzmöbel, Rümpfe, Schultern, Hälse, Arme und
Hinterköpfe sind ersatzlos weg. Die Agenten bestehen nur noch aus ihrem runden
Porträt mit weissem Ring.

**Positionen neu.** Ferdi und Bruno sind die direkten Nachbarn links und rechts
vorne, die übrigen gestaffelt dahinter, Thomas unverändert vis-à-vis. Die
Kreise liegen deutlich über der Blickachse: lagen sie auf Augenhöhe,
projizierten alle fünf auf fast dieselbe Bildhöhe und die hinteren
verschwanden hinter den vorderen — seitliches Auseinanderziehen half dagegen
nicht, weil ein tieferer Platz in der Perspektive zur Mitte wandert.

Dazu ein echter Fehler, der dabei auffiel: die grosszügigen Trefferquader der
vorderen Kreise fingen die Strahlen der hinteren ab, ein Klick auf Livia landete
bei Ferdi. Die Trefferfläche ist jetzt eine Kugel knapp um den sichtbaren Kreis.

**Bildschärfe.** Die Textur wird auf einen mittigen quadratischen Ausschnitt
begrenzt — ohne das zieht die Kreisgeometrie ein liegendes Foto in die Breite,
was Gesichter verzerrt und Schärfe kostet. Dazu anisotrope Filterung und
Mipmaps. Höher aufgelöste Originale der fünf Agenten waren nicht auffindbar:
die Porträts in `Agenten_Verwaltung_Fotos.html` liegen zwar in 256×256 vor,
gehören aber zu einer anderen Belegschaft — geprüft und verworfen, statt Gesichter
zu vertauschen.

**Ortsangabe** unten rechts entfernt. **Menü** liegt bündig an der rechten
Fensterkante: der Spalt kam vom Anker am eingerückten Menüsymbol, jetzt ist das
Klappmenü an eine Bildschirmstelle gebunden.

Geprüft: 422 Tests, Typecheck, Build, ESLint, Token-Schwelle (884/925). Im
Browser 1280 und 1600 px: sechs Beschriftungen ohne Überlappung, sechs Kreise
ohne Überlappung, alle sechs per Maus auf der richtigen Subpage, Menü bündig
ohne waagrechten Scrollbalken, keine Konsolenfehler.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin SutterandClaude Opus 5 committed 2026-08-17 14:32:58 +02:00
1 parent bf453d2b69
commit 4349641ee9
7 files changed
+358 -158

No files matched your search

+21 -3
View File
@@ -37,6 +37,9 @@ const ROLE_LABELS: Record<string, string> = {
*/
export function GlobalNavMenu() {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
// Beim Öffnen festgehaltene Ankerstelle: oben unter der Kopfzeile, rechts
// exakt an der Fensterkante.
const [ankerStelle, setAnkerStelle] = useState({ top: 64, left: 0 })
const { currentUser, logout } = useSessionStore()
const navigate = useNavigate()
const showToast = useToastStore(s => s.showToast)
@@ -61,7 +64,12 @@ export function GlobalNavMenu() {
<Tooltip title="Menü">
<IconButton
size="small"
onClick={e => setAnchorEl(open ? null : e.currentTarget)}
onClick={e => {
if (open) { setAnchorEl(null); return }
const b = e.currentTarget.getBoundingClientRect()
setAnkerStelle({ top: b.bottom + 8, left: document.documentElement.clientWidth })
setAnchorEl(e.currentTarget)
}}
aria-label="Menü öffnen"
aria-haspopup="true"
aria-expanded={open}
@@ -75,12 +83,22 @@ export function GlobalNavMenu() {
open={open}
anchorEl={anchorEl}
onClose={close}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
/*
* An eine Bildschirmstelle statt an das Symbol gebunden: das Symbol liegt
* um den Innenabstand der Kopfzeile eingerückt, und ein daran
* ausgerichtetes Menü erbte genau diesen Abstand als Spalt zur rechten
* Fensterkante (§5.1). `marginThreshold={0}` hebt zusätzlich den
* Sicherheitsabstand auf, den MUI sonst zum Fensterrand hält.
* Gerechnet wird mit `clientWidth` statt `innerWidth`, also ohne den
* Scrollbalken — sonst entstünde ein waagrechter Scrollbalken.
*/
anchorReference="anchorPosition"
anchorPosition={ankerStelle}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
marginThreshold={0}
slotProps={{
paper: {
sx: {
mt: 1,
width: 320,
borderRadius: 2,
boxShadow: '0 18px 50px rgba(15,25,35,0.22)',