From 50c73f570a6bf55cc44fc38eedd830bf37155d95 Mon Sep 17 00:00:00 2001
From: needs <624097+needs@users.noreply.github.com>
Date: Fri, 21 Aug 2026 02:58:49 +0200
Subject: [PATCH] Keep header text off the activity calendar

The five headers overlaying a title on the calendar used a fixed w-1/2
gradient, so any content wider than half the header - dividers,
playtime, last seen, long server names - landed unreadable on the
cells. Extract a shared ActivityHeader whose overlay is sized to its
content and fades from opaque white through 85% to transparent, and
drop the calendar below md where the title alone needs the full width.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 apps/frontend/app/clan/[clanName]/layout.tsx  | 38 +++++----
 .../[gameTypeName]/(lists)/layout.tsx         | 18 ++---
 .../[gameTypeName]/map/[mapName]/layout.tsx   | 34 ++++----
 .../app/player/[playerName]/layout.tsx        | 72 ++++++++---------
 apps/frontend/app/server/[ip]/[port]/page.tsx | 80 +++++++++----------
 apps/frontend/components/ActivityHeader.tsx   | 31 +++++++
 6 files changed, 147 insertions(+), 126 deletions(-)
 create mode 100644 apps/frontend/components/ActivityHeader.tsx

diff --git a/apps/frontend/app/clan/[clanName]/layout.tsx b/apps/frontend/app/clan/[clanName]/layout.tsx
index 579aa2b..7352880 100644
--- a/apps/frontend/app/clan/[clanName]/layout.tsx
+++ b/apps/frontend/app/clan/[clanName]/layout.tsx
@@ -6,7 +6,7 @@ import { z } from 'zod';
 import { formatPlayTime } from '../../../utils/format';
 import { encodeString } from '../../../utils/encoding';
 import { ClanPlayerCount } from './ClanPlayerCount';
-import { ActivityCalendarSection } from '../../../components/ActivityCalendarSection';
+import { ActivityHeader } from '../../../components/ActivityHeader';
 import { getClanActivity } from '../../../utils/activity';
 
 export default async function Index({
@@ -58,26 +58,24 @@ export default async function Index({
   return (
     <main className="flex flex-col gap-8 py-12">
       <header className="px-8 xl:px-20">
-        <div className="relative">
-          <ActivityCalendarSection
-            apiPath={`/api/clan/${encodeString(clanName)}/activity`}
-            initial={activity}
-          />
-          <div className="absolute inset-y-0 left-0 z-10 flex w-1/2 flex-col justify-center gap-2 bg-gradient-to-r from-white from-30% via-white/85 via-65% to-transparent">
-            <h1 className="text-2xl font-bold">{clan.name}</h1>
-            <div className="flex flex-row divide-x">
-              <span className="pr-4">
-                <ClanPlayerCount
-                  activeCount={clan.activePlayerCount}
-                  totalCount={clan._count.clanPlayerInfos}
-                />
-              </span>
-              <span className="px-4">
-                Playtime: {formatPlayTime(clan.playTime)}
-              </span>
-            </div>
+        <ActivityHeader
+          apiPath={`/api/clan/${encodeString(clanName)}/activity`}
+          activity={activity}
+          contentClassName="flex-col justify-center gap-2"
+        >
+          <h1 className="text-2xl font-bold">{clan.name}</h1>
+          <div className="flex flex-row divide-x">
+            <span className="pr-4">
+              <ClanPlayerCount
+                activeCount={clan.activePlayerCount}
+                totalCount={clan._count.clanPlayerInfos}
+              />
+            </span>
+            <span className="px-4">
+              Playtime: {formatPlayTime(clan.playTime)}
+            </span>
           </div>
-        </div>
+        </ActivityHeader>
       </header>
 
       <LayoutTabs
diff --git a/apps/frontend/app/gametype/[gameTypeName]/(lists)/layout.tsx b/apps/frontend/app/gametype/[gameTypeName]/(lists)/layout.tsx
index 3b6830f..23744e4 100644
--- a/apps/frontend/app/gametype/[gameTypeName]/(lists)/layout.tsx
+++ b/apps/frontend/app/gametype/[gameTypeName]/(lists)/layout.tsx
@@ -3,7 +3,7 @@ import prisma from '../../../../utils/prisma';
 import { LayoutTabs } from '../LayoutTabs';
 import { paramsSchema } from '../schema';
 import { encodeString } from '../../../../utils/encoding';
-import { ActivityCalendarSection } from '../../../../components/ActivityCalendarSection';
+import { ActivityHeader } from '../../../../components/ActivityHeader';
 import { getGameTypeActivity } from '../../../../utils/activity';
 
 export default async function Index({
@@ -30,15 +30,13 @@ export default async function Index({
   return (
     <div className="flex flex-col gap-4 py-8">
       <header className="px-8 xl:px-20">
-        <div className="relative">
-          <ActivityCalendarSection
-            apiPath={`/api/gametype/${encodeString(gameTypeName)}/activity`}
-            initial={activity}
-          />
-          <div className="absolute inset-y-0 left-0 z-10 flex w-1/2 flex-row items-center gap-4 bg-gradient-to-r from-white from-30% via-white/85 via-65% to-transparent">
-            <h1 className="text-2xl font-bold">{gameTypeName}</h1>
-          </div>
-        </div>
+        <ActivityHeader
+          apiPath={`/api/gametype/${encodeString(gameTypeName)}/activity`}
+          activity={activity}
+          contentClassName="flex-row items-center gap-4"
+        >
+          <h1 className="text-2xl font-bold">{gameTypeName}</h1>
+        </ActivityHeader>
       </header>
 
       <LayoutTabs
diff --git a/apps/frontend/app/gametype/[gameTypeName]/map/[mapName]/layout.tsx b/apps/frontend/app/gametype/[gameTypeName]/map/[mapName]/layout.tsx
index 43123e4..46e7770 100644
--- a/apps/frontend/app/gametype/[gameTypeName]/map/[mapName]/layout.tsx
+++ b/apps/frontend/app/gametype/[gameTypeName]/map/[mapName]/layout.tsx
@@ -4,7 +4,7 @@ import prisma from '../../../../../utils/prisma';
 import { LayoutTabs } from '../../LayoutTabs';
 import { paramsSchema } from './schema';
 import { encodeString } from '../../../../../utils/encoding';
-import { ActivityCalendarSection } from '../../../../../components/ActivityCalendarSection';
+import { ActivityHeader } from '../../../../../components/ActivityHeader';
 import { getMapActivity } from '../../../../../utils/activity';
 
 export default async function Index({
@@ -34,23 +34,21 @@ export default async function Index({
   return (
     <div className="flex flex-col gap-4 py-8">
       <header className="px-8 xl:px-20">
-        <div className="relative">
-          <ActivityCalendarSection
-            apiPath={`/api/gametype/${encodeString(gameTypeName)}/map/${encodeString(mapName)}/activity`}
-            initial={activity}
-          />
-          <div className="absolute inset-y-0 left-0 z-10 flex w-1/2 flex-col justify-center gap-2 bg-gradient-to-r from-white from-30% via-white/85 via-65% to-transparent">
-            <h1 className="text-2xl font-bold">{mapName}</h1>
-            <span>
-              <Link
-                className="hover:underline"
-                href={{ pathname: `/gametype/${encodeString(gameTypeName)}` }}
-              >
-                {gameTypeName}
-              </Link>
-            </span>
-          </div>
-        </div>
+        <ActivityHeader
+          apiPath={`/api/gametype/${encodeString(gameTypeName)}/map/${encodeString(mapName)}/activity`}
+          activity={activity}
+          contentClassName="flex-col justify-center gap-2"
+        >
+          <h1 className="text-2xl font-bold">{mapName}</h1>
+          <span>
+            <Link
+              className="hover:underline"
+              href={{ pathname: `/gametype/${encodeString(gameTypeName)}` }}
+            >
+              {gameTypeName}
+            </Link>
+          </span>
+        </ActivityHeader>
       </header>
 
       <LayoutTabs
diff --git a/apps/frontend/app/player/[playerName]/layout.tsx b/apps/frontend/app/player/[playerName]/layout.tsx
index 331373d..c766a06 100644
--- a/apps/frontend/app/player/[playerName]/layout.tsx
+++ b/apps/frontend/app/player/[playerName]/layout.tsx
@@ -8,7 +8,7 @@ import { LayoutTabs } from './LayoutTabs';
 import { LastSeen } from '../../../components/LastSeen';
 import { formatPlayTime } from '../../../utils/format';
 import { encodeString } from '../../../utils/encoding';
-import { ActivityCalendarSection } from '../../../components/ActivityCalendarSection';
+import { ActivityHeader } from '../../../components/ActivityHeader';
 import { getPlayerActivity } from '../../../utils/activity';
 
 export default async function Index({
@@ -74,43 +74,41 @@ export default async function Index({
   return (
     <main className="flex flex-col gap-8 py-12">
       <header className="px-8 xl:px-20">
-        <div className="relative">
-          <ActivityCalendarSection
-            apiPath={`/api/player/${encodeString(playerName)}/activity`}
-            initial={activity}
-          />
-          <div className="absolute inset-y-0 left-0 z-10 flex w-1/2 flex-row items-center gap-4 bg-gradient-to-r from-white from-30% via-white/85 via-65% to-transparent">
-            <Image src="/player.png" width={100} height={100} alt="Player" />
-            <section className="flex flex-col gap-2">
-              <h1 className="text-2xl font-bold">{player.name}</h1>
-              <div className="flex flex-row divide-x">
-                {player.clanName !== null && (
-                  <span className="pr-4">
-                    <Link
-                      className="hover:underline"
-                      href={{
-                        pathname: `/clan/${encodeString(player.clanName)}`,
-                      }}
-                    >
-                      {player.clanName}
-                    </Link>
-                  </span>
-                )}
-                <span className={player.clanName !== null ? 'px-4' : 'pr-4'}>
-                  Playtime: {formatPlayTime(player.playTime)}
+        <ActivityHeader
+          apiPath={`/api/player/${encodeString(playerName)}/activity`}
+          activity={activity}
+          contentClassName="flex-row items-center gap-4"
+        >
+          <Image src="/player.png" width={100} height={100} alt="Player" />
+          <section className="flex flex-col gap-2">
+            <h1 className="text-2xl font-bold">{player.name}</h1>
+            <div className="flex flex-row divide-x">
+              {player.clanName !== null && (
+                <span className="pr-4">
+                  <Link
+                    className="hover:underline"
+                    href={{
+                      pathname: `/clan/${encodeString(player.clanName)}`,
+                    }}
+                  >
+                    {player.clanName}
+                  </Link>
                 </span>
-                <span className="px-4">
-                  <LastSeen
-                    gameServers={player.gameServerStateClients
-                      .map((client) => client.gameServerState.gameServer)
-                      .filter((gameServer) => gameServer !== null)}
-                    lastSeenAt={player.lastSeenAt}
-                  />
-                </span>
-              </div>
-            </section>
-          </div>
-        </div>
+              )}
+              <span className={player.clanName !== null ? 'px-4' : 'pr-4'}>
+                Playtime: {formatPlayTime(player.playTime)}
+              </span>
+              <span className="px-4">
+                <LastSeen
+                  gameServers={player.gameServerStateClients
+                    .map((client) => client.gameServerState.gameServer)
+                    .filter((gameServer) => gameServer !== null)}
+                  lastSeenAt={player.lastSeenAt}
+                />
+              </span>
+            </div>
+          </section>
+        </ActivityHeader>
       </header>
 
       <LayoutTabs
diff --git a/apps/frontend/app/server/[ip]/[port]/page.tsx b/apps/frontend/app/server/[ip]/[port]/page.tsx
index 724a895..88ecc48 100644
--- a/apps/frontend/app/server/[ip]/[port]/page.tsx
+++ b/apps/frontend/app/server/[ip]/[port]/page.tsx
@@ -12,7 +12,7 @@ import { formatPlayTime } from '../../../../utils/format';
 import { GameServer } from '@prisma/client';
 import { formatDuration, intervalToDuration } from 'date-fns';
 import { Metadata } from 'next';
-import { ActivityCalendarSection } from '../../../../components/ActivityCalendarSection';
+import { ActivityHeader } from '../../../../components/ActivityHeader';
 import { getServerActivity } from '../../../../utils/activity';
 
 export async function generateMetadata({
@@ -140,47 +140,45 @@ export default async function Index({
   return (
     <main className="flex flex-col gap-8 py-12">
       <header className="px-8 xl:px-20">
-        <div className="relative">
-          <ActivityCalendarSection
-            apiPath={`/api/server/${encodeIp(gameServer.ip)}/${gameServer.port}/activity`}
-            initial={activity}
-          />
-          <div className="absolute inset-y-0 left-0 z-10 flex w-1/2 flex-col justify-center gap-2 bg-gradient-to-r from-white from-30% via-white/85 via-65% to-transparent">
-            <h1 className="text-2xl font-bold">
-              {gameServer.gameServerState.name}
-            </h1>
-            <div className="flex flex-row divide-x">
-              <span className="pr-4">
-                <Link
-                  className="hover:underline"
-                  href={{
-                    pathname: `/gametype/${encodeString(
-                      gameServer.gameServerState.map.gameTypeName
-                    )}`,
-                  }}
-                >
-                  {gameServer.gameServerState.map.gameTypeName}
-                </Link>
-              </span>
-              <span className="px-4">
-                <Link
-                  className="hover:underline"
-                  href={{
-                    pathname: `/gametype/${encodeString(
-                      gameServer.gameServerState.map.gameTypeName
-                    )}/map/${encodeString(gameServer.gameServerState.map.name)}`,
-                  }}
-                >
-                  {gameServer.gameServerState.map.name}
-                </Link>
-              </span>
-              <span className="px-4">{`${gameServer.gameServerState.numClients} / ${gameServer.gameServerState.maxClients} clients`}</span>
-              <span className="px-4">
-                Playtime: {formatPlayTime(gameServer.playTime)}
-              </span>
-            </div>
+        <ActivityHeader
+          apiPath={`/api/server/${encodeIp(gameServer.ip)}/${gameServer.port}/activity`}
+          activity={activity}
+          contentClassName="flex-col justify-center gap-2"
+        >
+          <h1 className="text-2xl font-bold">
+            {gameServer.gameServerState.name}
+          </h1>
+          <div className="flex flex-row divide-x">
+            <span className="pr-4">
+              <Link
+                className="hover:underline"
+                href={{
+                  pathname: `/gametype/${encodeString(
+                    gameServer.gameServerState.map.gameTypeName
+                  )}`,
+                }}
+              >
+                {gameServer.gameServerState.map.gameTypeName}
+              </Link>
+            </span>
+            <span className="px-4">
+              <Link
+                className="hover:underline"
+                href={{
+                  pathname: `/gametype/${encodeString(
+                    gameServer.gameServerState.map.gameTypeName
+                  )}/map/${encodeString(gameServer.gameServerState.map.name)}`,
+                }}
+              >
+                {gameServer.gameServerState.map.name}
+              </Link>
+            </span>
+            <span className="px-4">{`${gameServer.gameServerState.numClients} / ${gameServer.gameServerState.maxClients} clients`}</span>
+            <span className="px-4">
+              Playtime: {formatPlayTime(gameServer.playTime)}
+            </span>
           </div>
-        </div>
+        </ActivityHeader>
       </header>
 
       <SnapshotTimeline
diff --git a/apps/frontend/components/ActivityHeader.tsx b/apps/frontend/components/ActivityHeader.tsx
new file mode 100644
index 0000000..cc374a8
--- /dev/null
+++ b/apps/frontend/components/ActivityHeader.tsx
@@ -0,0 +1,31 @@
+import { ActivityPayload } from './ActivityCalendar';
+import { ActivityCalendarSection } from './ActivityCalendarSection';
+
+export function ActivityHeader({
+  apiPath,
+  activity,
+  contentClassName,
+  children,
+}: {
+  apiPath: string;
+  activity: ActivityPayload;
+  contentClassName: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="relative">
+      <div className="hidden md:block">
+        <ActivityCalendarSection apiPath={apiPath} initial={activity} />
+      </div>
+
+      <div className="flex max-w-full flex-row md:absolute md:inset-y-0 md:left-0 md:z-10">
+        <div
+          className={`flex min-w-0 bg-gradient-to-r from-white from-30% to-white/85 ${contentClassName}`}
+        >
+          {children}
+        </div>
+        <div className="hidden w-24 shrink-0 bg-gradient-to-r from-white/85 to-transparent md:block" />
+      </div>
+    </div>
+  );
+}