From c425102d87849ac9fdc9b4dfd78f482ab687e227 Mon Sep 17 00:00:00 2001
From: Matthias G <matthias.giesselmann@pocket-rocket.io>
Date: Mon, 3 Aug 2026 10:52:17 +0200
Subject: [PATCH] Use the width on the API page

Prose ran at reading width while the tables next to it spanned the window.
The text blocks widen, the addresses now use the full row, and the hint
counts three files instead of two.
---
 src/app/admin/api/page.tsx | 40 +++++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/app/admin/api/page.tsx b/src/app/admin/api/page.tsx
index 927562d..9dee330 100644
--- a/src/app/admin/api/page.tsx
+++ b/src/app/admin/api/page.tsx
@@ -55,7 +55,7 @@ export default async function AdminApiPage() {
 
 			<section className="flex flex-col gap-4">
 				<SectionLabel>Wofür Logbuch da ist</SectionLabel>
-				<div className="flex max-w-read flex-col gap-4 text-pretty text-ink-2">
+				<div className="flex max-w-3xl flex-col gap-4 text-pretty text-ink-2">
 					<p className="m-0">
 						Logbuch hält fest, was in den Produkten passiert ist. Alle zwei Wochen entsteht pro Projekt ein
 						Eintrag über das, was fertig geworden ist.
@@ -72,7 +72,7 @@ export default async function AdminApiPage() {
 
 			<section className="flex flex-col gap-4">
 				<SectionLabel>Zum Mitnehmen</SectionLabel>
-				<div className="flex max-w-read flex-col gap-4 text-pretty text-ink-2">
+				<div className="flex max-w-3xl flex-col gap-4 text-pretty text-ink-2">
 					<p className="m-0">
 						Die Beschreibung im OpenAPI-Format lässt sich in Postman, Bruno, Insomnia und ähnliche Werkzeuge
 						einlesen. Für Claude gibt es zusätzlich einen fertigen Skill: die Datei landet als
@@ -107,28 +107,28 @@ export default async function AdminApiPage() {
 						</a>
 					</div>
 					<p className="m-0 text-small">
-						Angemeldet als Admin lädst du beide Dateien direkt herunter. Über die Schnittstelle verlangen
+						Angemeldet als Admin lädst du alle drei Dateien direkt herunter. Über die Schnittstelle verlangen
 						sie ein Token, in Postman oder Bruno unter Authorization als Bearer.
 					</p>
-					<div className="flex flex-col divide-y divide-rule border-y border-rule">
-						{files.map(file => (
-							<div key={file.url} className="flex flex-wrap items-center justify-between gap-3 py-3">
-								<span className="flex min-w-0 flex-col gap-1">
-									<span className="font-display text-micro font-semibold uppercase tracking-label text-ink-3">
-										{file.label}
-									</span>
-									<code className="block break-all font-mono text-small text-ink">{file.url}</code>
+				</div>
+				<div className="flex w-full flex-col divide-y divide-rule border-y border-rule">
+					{files.map(file => (
+						<div key={file.url} className="flex flex-wrap items-center justify-between gap-3 py-3">
+							<span className="flex min-w-0 flex-col gap-1">
+								<span className="font-display text-micro font-semibold uppercase tracking-label text-ink-3">
+									{file.label}
 								</span>
-								<CopyButton value={file.url} label="Adresse kopieren" doneLabel="Kopiert" />
-							</div>
-						))}
-					</div>
+								<code className="block break-all font-mono text-small text-ink">{file.url}</code>
+							</span>
+							<CopyButton value={file.url} label="Adresse kopieren" doneLabel="Kopiert" />
+						</div>
+					))}
 				</div>
 			</section>
 
 			<section className="flex flex-col gap-4">
 				<SectionLabel>Anmeldung</SectionLabel>
-				<div className="flex max-w-read flex-col gap-4 text-pretty text-ink-2">
+				<div className="flex max-w-3xl flex-col gap-4 text-pretty text-ink-2">
 					<p className="m-0">
 						Jede Anfrage trägt ein Token im Kopf:
 						{' '}
@@ -168,7 +168,7 @@ export default async function AdminApiPage() {
 					</table>
 				</Scroller>
 
-				<p className="m-0 max-w-read text-pretty text-ink-2">
+				<p className="m-0 max-w-3xl text-pretty text-ink-2">
 					Ein Zugang mit Schreibrecht kann niemals veröffentlichen. Alles landet als Entwurf, ein Mensch gibt
 					frei.
 				</p>
@@ -316,7 +316,7 @@ export default async function AdminApiPage() {
 
 			<section className="flex flex-col gap-4">
 				<SectionLabel>Datum und Nummer</SectionLabel>
-				<div className="flex max-w-read flex-col gap-4 text-pretty text-ink-2">
+				<div className="flex max-w-3xl flex-col gap-4 text-pretty text-ink-2">
 					<p className="m-0">
 						<code className="font-mono text-small text-ink">publish_at</code> nimmt eine ISO-Zeitangabe entgegen,
 						beim Anlegen und beim Ändern. Der Zugang veröffentlicht damit nichts, er hinterlegt nur das Datum.
@@ -374,7 +374,7 @@ export default async function AdminApiPage() {
 						</tbody>
 					</table>
 				</Scroller>
-				<p className="m-0 max-w-read text-pretty text-ink-2">
+				<p className="m-0 max-w-3xl text-pretty text-ink-2">
 					Ein Zugang darf keine Zielgruppe setzen, die offener ist als seine eigene. Ein Zugang mit customer
 					kann internal und customer schreiben, public nicht.
 				</p>
@@ -404,7 +404,7 @@ export default async function AdminApiPage() {
 
 			<section className="flex flex-col gap-4">
 				<SectionLabel>Fehler</SectionLabel>
-				<p className="m-0 max-w-read text-pretty text-ink-2">
+				<p className="m-0 max-w-3xl text-pretty text-ink-2">
 					Fehler kommen einheitlich als Problem-JSON mit type, title, status und detail. 401 fehlendes oder
 					widerrufenes Token, 403 fehlendes Recht, 404 nicht vorhanden oder nicht sichtbar, 409 bereits
 					veröffentlicht, 422 unbekannte Beitragsart, 400 fehlerhafte Eingabe.