From 3389ba17f4509bcd631b40fdefda0524a9a1ba06 Mon Sep 17 00:00:00 2001
From: Florian Heinz <mail@hnz.io>
Date: Fri, 23 Oct 2026 23:55:34 +0200
Subject: [PATCH] Fix topic icon picker placement

---
 docs/ACCEPTANCE.md    |  1 +
 docs/RELEASE_NOTES.md |  2 ++
 docs/STATUS.md        |  2 ++
 src/app.css           |  7 +++++++
 tests/ui.e2e.ts       | 18 ++++++++++++++++++
 5 files changed, 30 insertions(+)

diff --git a/docs/ACCEPTANCE.md b/docs/ACCEPTANCE.md
index 41d67bd..02d6395 100644
--- a/docs/ACCEPTANCE.md
+++ b/docs/ACCEPTANCE.md
@@ -420,6 +420,7 @@
 | Werkzeugdialog ist initial geschlossen     | Chromium prüft den Dialog vor jeder Bedienaktion bei 390 und 1280 Pixeln                 | erfüllt am 23.10.2026 |
 | Dialog öffnet nur nach bewusster Aktion    | Browser legt ein Werkzeug an und öffnet ein bestehendes Werkzeug anschließend zum Ändern | erfüllt am 23.10.2026 |
 | Bestehender Werkzeugablauf bleibt erhalten | Browser prüft Icon, Format, Deaktivierung und Piece-Zuordnung nach erneutem Laden        | erfüllt am 23.10.2026 |
+| Themen-Iconpicker bleibt im Viewport       | Chromium prüft Öffnen und Auswahl bei 390, 960 und 1280 Pixeln                           | erfüllt am 23.10.2026 |
 
 ## Ausgeführte Prüfungen 0.5.11
 
diff --git a/docs/RELEASE_NOTES.md b/docs/RELEASE_NOTES.md
index 578ce91..ad14590 100644
--- a/docs/RELEASE_NOTES.md
+++ b/docs/RELEASE_NOTES.md
@@ -8,6 +8,8 @@ Veröffentlicht am 23. Oktober 2026
   wieder zuverlässig geschlossen.
 - Der Dialog erscheint erst, wenn ein neues Werkzeug angelegt oder ein
   bestehendes Werkzeug bearbeitet wird.
+- Die Iconauswahl unter „Inhaltliche Zuordnung“ bleibt auf Desktop und
+  Smartphone vollständig im sichtbaren Browserbereich.
 - Die Korrektur gilt gleichermaßen für Desktop- und Smartphone-Ansichten und
   verändert keine vorhandenen Werkzeuge oder Zuordnungen.
 
diff --git a/docs/STATUS.md b/docs/STATUS.md
index e3391a5..2d28c4c 100644
--- a/docs/STATUS.md
+++ b/docs/STATUS.md
@@ -12,6 +12,8 @@ Etappe 6 wurde nicht begonnen.
 - der Werkzeugdialog bleibt nach dem Laden der Verwaltungsseite geschlossen und
   wird erst durch „Werkzeug hinzufügen“ oder die Bearbeitung eines vorhandenen
   Werkzeugs als modaler Dialog eingeblendet
+- die Iconauswahl der Themenverwaltung bleibt auch in der rechten Desktop-Spalte
+  vollständig innerhalb des sichtbaren Browserbereichs
 - ein Browser-Regressionscheck sichert den geschlossenen Ausgangszustand ab
 
 Etappe 6 bleibt unverändert unbegonnen.
diff --git a/src/app.css b/src/app.css
index 05e95ff..85f4465 100644
--- a/src/app.css
+++ b/src/app.css
@@ -5634,6 +5634,13 @@ body:has(.heinzlive-output.empty),
 	left: auto;
 }
 
+@media (min-width: 52.001rem) {
+	.topic-management-panel .icon-picker-popover {
+		right: 0;
+		left: auto;
+	}
+}
+
 .choice-picker-search {
 	display: grid !important;
 	grid-template-columns: auto 1fr;
diff --git a/tests/ui.e2e.ts b/tests/ui.e2e.ts
index 9991125..3b1b90b 100644
--- a/tests/ui.e2e.ts
+++ b/tests/ui.e2e.ts
@@ -891,6 +891,24 @@ test('inbox, archive and administration stay concise', async ({ page }) => {
 	]);
 	expect(boxes[0]?.y).toBe(boxes[1]?.y);
 	expect(boxes[1]?.y).toBe(boxes[2]?.y);
+
+	const topicIconPicker = page.locator('.topic-management-panel .taxonomy-form .icon-picker');
+	for (const width of [1280, 960, 390]) {
+		await page.setViewportSize({ width, height: 900 });
+		await topicIconPicker.getByText('Icon auswählen', { exact: true }).click();
+		const popover = topicIconPicker.locator('.icon-picker-popover');
+		await expect(popover).toBeVisible();
+		const popoverBox = await popover.boundingBox();
+		expect(popoverBox?.x ?? -1).toBeGreaterThanOrEqual(0);
+		expect((popoverBox?.x ?? width) + (popoverBox?.width ?? 1)).toBeLessThanOrEqual(width);
+		await topicIconPicker.getByText('Icon auswählen', { exact: true }).click();
+	}
+
+	await page.setViewportSize({ width: 1280, height: 900 });
+	await topicIconPicker.getByText('Icon auswählen', { exact: true }).click();
+	await topicIconPicker.getByPlaceholder('Icon suchen').fill('Satellite Dish');
+	await topicIconPicker.getByRole('button', { name: 'Satellite Dish', exact: true }).click();
+	await expect(topicIconPicker.locator('input[type="hidden"]')).toHaveValue('satellite-dish');
 });
 
 test('tools stay editable in pieces after catalog deactivation', async ({ page }, testInfo) => {