florian.wildeandClaude Opus 5
f3c3383231
CI / pruefen (push) Canceled after 0s
Auf 375px war das Dashboard 40px breiter als der Bildschirm. Ursache war die Steuerleiste: Suchfeld, Sortierung, Ansichtsumschalter und "Neues Projekt" lagen in einer Flex-Zeile ohne Umbruch, und weil das Sortierfeld ein min-width mitbringt, wurde der Knopf am Ende schlicht hinausgeschoben. Das overflow-x: hidden am body hat ihn dann abgeschnitten statt erreichbar zu lassen. Dasselbe Muster im Projektkopf, wo "Loeschen" ausserhalb lag. Die Zeilen brechen jetzt um, der Ansichtsumschalter steht auf schmalen Anzeigen ueber die volle Breite. Gemessen ueber alle Seiten und beide Testbreiten: scrollWidth == clientWidth. Weil der Umschalter ohnehin umgebaut wurde, kommt die vierte Ansicht gleich mit: eine Zeile je Projekt statt einer Karte. Auf dem Telefon ist das der eigentliche Gewinn — eine Karte braucht rund 260px Hoehe und steht dort zwangslaeufig allein in der Zeile, fuenf Projekte fuellen also zwei Bildschirme. Als Liste passen sie auf einen, und weil alle Zeilen gleich gebaut sind, liegen Name, Fortschritt und Status untereinander. Was nicht mehr in die Breite passt, faellt der Reihe nach weg, statt sie zu sprengen. Dazu die Kleinigkeiten, die auf dem Telefon dranhaengen: - .field bekommt auf Beruehrungsgeraeten 16px. Darunter zoomt iOS Safari beim Hineintippen die Seite heran und kehrt nicht von selbst zurueck. - .btn mindestens 44px hoch, der Schieberegler einen 24px-Griff. - Der Popover klemmt seine Breite ans Fenster. Unter 280px lieferte die Rechnung eine negative linke Kante, das Menue stand halb ausserhalb. - Das Tag-Formular der Auswahlleiste war 16px breiter als sein Popover und wurde von dessen overflow-hidden beschnitten – auf jeder Breite. - Die Heatmap scrollt wieder seitlich, statt sich zu stauchen. - Die Kennzahlen stehen zweispaltig; einspaltig fuellten die fuenf Kacheln den ganzen ersten Bildschirm, bevor das erste Projekt kam. - viewportFit und die safe-area-Abstaende, damit im installierten Betrieb nichts unter Statusleiste und Home-Anzeige verschwindet. - Die beiden Verweise in der Kopfleiste und "Neues Projekt" tragen ein aria-label. Unterhalb von sm sind sie reine Symbole und hiessen fuer einen Screenreader gar nichts; axe-core meldete das als link-name. axe-core laeuft auf 375px ueber alle vier Ansichten, den Dialog und die Projektseite jetzt ohne Beanstandung. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
86 lines
3.4 KiB
TypeScript
86 lines
3.4 KiB
TypeScript
import type { Metadata, Viewport } from "next";
|
||
import { ChangelogButton } from "@/components/ChangelogButton";
|
||
import { CommandPalette } from "@/components/CommandPalette";
|
||
import { TopNav } from "@/components/TopNav";
|
||
import { getSessionUser } from "@/lib/auth/session";
|
||
import { APP_NAME, APP_TAGLINE, APP_VERSION } from "@/lib/config";
|
||
import "./globals.css";
|
||
|
||
/**
|
||
* generateMetadata statt eines konstanten metadata-Objekts: nur so wird
|
||
* APP_NAME zur Laufzeit gelesen. Ein konstanter Export waere beim Build
|
||
* eingefroren und liesse sich im fertigen Docker-Image nicht mehr aendern.
|
||
*/
|
||
export async function generateMetadata(): Promise<Metadata> {
|
||
return {
|
||
title: {
|
||
default: `${APP_NAME} – Vibe Coding Dashboard`,
|
||
template: `%s · ${APP_NAME}`,
|
||
},
|
||
description:
|
||
"Uebersicht ueber alle Vibe-Coding Projekte: Status, Notizen und Live-Daten aus GitHub, GitLab und Gitea.",
|
||
applicationName: APP_NAME,
|
||
robots: { index: false, follow: false },
|
||
manifest: "/manifest.webmanifest",
|
||
// iOS liest das Manifest nicht; dort braucht es diese Angaben einzeln.
|
||
appleWebApp: { capable: true, title: APP_NAME, statusBarStyle: "black-translucent" },
|
||
// Beide Eintraege ausdruecklich: sobald hier etwas steht, ersetzt es den
|
||
// Verweis, den Next aus app/icon.svg von selbst erzeugt. Ohne die erste
|
||
// Zeile haette die Seite gar kein Symbol mehr und der Browser fiele auf
|
||
// /favicon.ico zurueck – das es hier nicht gibt.
|
||
icons: {
|
||
icon: [
|
||
{ url: "/icon.svg", type: "image/svg+xml" },
|
||
{ url: "/icon-192.png", sizes: "192x192", type: "image/png" },
|
||
],
|
||
apple: "/apple-touch-icon.png",
|
||
},
|
||
};
|
||
}
|
||
|
||
export const viewport: Viewport = {
|
||
themeColor: "#05060f",
|
||
width: "device-width",
|
||
initialScale: 1,
|
||
// Die Seite reicht bis unter Statusleiste und Home-Anzeige; das ist noetig,
|
||
// damit der Hintergrund im installierten Betrieb nicht an einem weissen
|
||
// Balken endet. Was dadurch verdeckt wuerde, holen die env(safe-area-*)
|
||
// in globals.css wieder heraus.
|
||
viewportFit: "cover",
|
||
};
|
||
|
||
export default async function RootLayout({
|
||
children,
|
||
}: Readonly<{ children: React.ReactNode }>) {
|
||
const user = await getSessionUser();
|
||
|
||
return (
|
||
<html lang="de" suppressHydrationWarning>
|
||
<body className="min-h-screen antialiased">
|
||
<div className="aurora" aria-hidden="true">
|
||
<div className="aurora-blob aurora-blob--one" />
|
||
<div className="aurora-blob aurora-blob--two" />
|
||
<div className="aurora-blob aurora-blob--three" />
|
||
</div>
|
||
<div className="aurora-grid" aria-hidden="true" />
|
||
|
||
<TopNav user={user} appName={APP_NAME} tagline={APP_TAGLINE} />
|
||
|
||
{/* Nur fuer Angemeldete – auf der Anmeldeseite gibt es nichts zu suchen. */}
|
||
{user ? <CommandPalette isAdmin={user.role === "ADMIN"} /> : null}
|
||
|
||
<main className="mx-auto w-full max-w-[1400px] px-4 pb-24 pt-6 sm:px-6 lg:px-8">
|
||
{children}
|
||
</main>
|
||
|
||
<footer className="mx-auto w-full max-w-[1400px] px-4 pb-10 text-xs text-slate-500 sm:px-6 lg:px-8">
|
||
<div className="flex flex-wrap items-center justify-between gap-2 border-t border-white/5 pt-6">
|
||
<span>{APP_NAME} · lokal betrieben, Daten bleiben in deiner PostgreSQL.</span>
|
||
<ChangelogButton version={APP_VERSION} />
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html>
|
||
);
|
||
}
|