Merge pull request #15 from felixgollnhuber/codex/layout-und-hintergrund-fixen

Fix manage page layout and clarify home and recent event copy

Author: felixgollnhuber

public/tempoll-logo.png

@@ -91,6 +91,7 @@
     @apply bg-background text-foreground;
     background-image:
       radial-gradient(circle at top, color-mix(in srgb, var(--primary) 10%, transparent) 0, transparent 34%),
+      radial-gradient(circle at bottom, color-mix(in srgb, var(--primary) 8%, transparent) 0, transparent 30%),
       linear-gradient(180deg, color-mix(in srgb, white 55%, transparent) 0%, transparent 100%);
   }
   html {

src/app/globals.css

@@ -23,7 +23,7 @@ export default async function ManagePage({ params }: ManagePageProps) {
   }
 
   return (
-    <main className="app-shell flex-1 py-10 sm:py-14">
+    <main className="app-shell flex-1 pt-10 pb-20 sm:pt-14 sm:pb-24">
       <RecentEventTracker
         slug={view.snapshot.slug}
         title={view.snapshot.title}

src/app/manage/[token]/page.tsx

@@ -731,7 +731,13 @@ export function EventHeatmap({
       );
 
   return (
-    <div className="grid min-w-0 gap-4 xl:grid-cols-[minmax(0,1fr)_250px]">
+    <div
+      data-slot="event-heatmap-layout"
+      className={cn(
+        "grid min-w-0 gap-4",
+        showSidebar ? "xl:grid-cols-[minmax(0,1fr)_250px]" : "grid-cols-1",
+      )}
+    >
       <div className="min-w-0 space-y-4">
         <Card className="min-w-0 overflow-hidden">
           <CardHeader className="gap-3 p-4">

src/components/event-heatmap.tsx

@@ -125,6 +125,17 @@ describe("ManageEventClient", () => {
     ).toBeTruthy();
   });
 
+  it("renders the heatmap as a single content column when the embedded sidebar is disabled", () => {
+    const view = createManageView();
+    renderWithI18n(<ManageEventClient initialView={view} />);
+
+    const heatmapLayout = document.querySelector('[data-slot="event-heatmap-layout"]');
+
+    expect(heatmapLayout).not.toBeNull();
+    expect(heatmapLayout).toHaveClass("grid-cols-1");
+    expect(heatmapLayout?.className).not.toContain("xl:grid-cols-[minmax(0,1fr)_250px]");
+  });
+
   it("renders the heatmap and lets the organizer select a fixed date on closed events", () => {
     const view = createManageView({ status: "CLOSED" });
     renderWithI18n(<ManageEventClient initialView={view} />);

src/components/manage-event-client.test.tsx

@@ -360,15 +360,15 @@ export function ManageEventClient({ initialView }: ManageEventClientProps) {
   );
 
   return (
-    <div className="space-y-6">
-      <Card>
+    <div className="space-y-8">
+      <Card className="overflow-hidden">
         <CardHeader>
           <CardTitle className="text-3xl">{messages.manageEvent.title}</CardTitle>
           <CardDescription>
             {messages.manageEvent.description}
           </CardDescription>
         </CardHeader>
-        <CardContent className="grid gap-6 md:grid-cols-2">
+        <CardContent className="grid gap-x-6 gap-y-5 lg:grid-cols-2 lg:items-end">
           <div className="space-y-2">
             <Label htmlFor="title">{messages.manageEvent.titleLabel}</Label>
             <Input id="title" value={title} onChange={(event) => setTitle(event.target.value)} />
@@ -388,7 +388,7 @@ export function ManageEventClient({ initialView }: ManageEventClientProps) {
               </SelectContent>
             </Select>
           </div>
-          <div className="space-y-3 md:col-span-2">
+          <div className="space-y-3 lg:col-span-2">
             <Button
               onClick={updateEvent}
               disabled={isPending || isClosingWithoutFixedDate}
@@ -406,8 +406,8 @@ export function ManageEventClient({ initialView }: ManageEventClientProps) {
         </CardContent>
       </Card>
 
-      <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px] xl:items-start">
-        <aside className="order-1 min-w-0 space-y-6 xl:order-2">
+      <div className="grid gap-8 xl:grid-cols-[minmax(0,1fr)_22rem] xl:items-start">
+        <aside className="order-1 min-w-0 space-y-5 xl:order-2">
           <Card>
             <CardHeader>
               <CardTitle>{messages.manageEvent.shareLinksTitle}</CardTitle>

src/components/manage-event-client.tsx

@@ -0,0 +1,37 @@
+import { screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it } from "vitest";
+
+import { RecentEventsSection } from "./recent-events-section";
+import { renderWithI18n } from "@/test/render-with-i18n";
+
+describe("RecentEventsSection", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  it("uses clear labels for the board and organizer actions", () => {
+    window.localStorage.setItem(
+      "tempoll_recent_events",
+      JSON.stringify([
+        {
+          slug: "test-event",
+          title: "Test event",
+          lastViewedAt: "2026-03-28T20:35:00.000Z",
+          publicUrl: "/e/test-event",
+          manageUrl: "/manage/test-token",
+        },
+      ]),
+    );
+
+    renderWithI18n(<RecentEventsSection />, { locale: "de" });
+
+    expect(screen.getByRole("link", { name: "Board öffnen" })).toHaveAttribute(
+      "href",
+      "/e/test-event",
+    );
+    expect(screen.getByRole("link", { name: "Event verwalten" })).toHaveAttribute(
+      "href",
+      "/manage/test-token",
+    );
+  });
+});

src/components/recent-events-section.test.tsx

@@ -51,7 +51,7 @@ export const en = {
   },
   home: {
     badge: "Self-hosted, realtime, account-free",
-    title: "A cleaner When2Meet for modern teams.",
+    title: "The clearer alternative to When2Meet.",
     description:
       "Create an event, share the link, and let people paint their availability on a live heatmap. The organizer gets a private manage page and everyone else can join with just a name.",
     primaryCta: "Create an event",
@@ -279,8 +279,8 @@ export const en = {
       "Open a public board or organizer page and it will appear here for quick access.",
     lastOpened: "Last opened {timestamp}",
     privateLinkSaved: "Private link saved",
-    openPublic: "Open public",
-    openOrganizer: "Open organizer",
+    openPublic: "Open board",
+    openOrganizer: "Manage event",
     remove: "Remove",
   },
   notFound: {
@@ -612,7 +612,7 @@ export const de: Messages = {
   },
   home: {
     badge: "Self-hosted, in Echtzeit, ohne Konto",
-    title: "Ein übersichtlicheres When2Meet für moderne Teams.",
+    title: "Die übersichtliche Alternative zu When2Meet.",
     description:
       "Erstelle ein Event, teile den Link und lass alle ihre Verfügbarkeit direkt auf einer Live-Heatmap markieren. Die organisierende Person erhält eine private Verwaltungsseite, alle anderen steigen nur mit einem Namen ein.",
     primaryCta: "Event erstellen",
@@ -849,8 +849,8 @@ export const de: Messages = {
       "Öffne ein öffentliches Board oder eine Organizer-Seite, dann erscheint es hier für den schnellen Zugriff.",
     lastOpened: "Zuletzt geöffnet {timestamp}",
     privateLinkSaved: "Privater Link gespeichert",
-    openPublic: "Öffentlich öffnen",
-    openOrganizer: "Organizer öffnen",
+    openPublic: "Board öffnen",
+    openOrganizer: "Event verwalten",
     remove: "Entfernen",
   },
   notFound: {