@bearmenu/ui 0.8.7 → 0.8.9

package/src/components/event-hub-hero.stories.tsx

@@ -19,6 +19,7 @@ const meta: Meta<typeof EventHubHero> = {
   component: EventHubHero,
   tags: ["autodocs"],
   args: {
+    statsLabel: "Key figures",
     eyebrow: "Updated today",
     title: "Everything happening in Bucharest",
     intro:
@@ -64,3 +65,32 @@ export const NoAside: Story = {
 export const Skeleton: Story = {
   render: () => <EventHubHeroSkeleton aside={<div className="aspect-[3/2] rounded-xl bg-muted" />} />,
 };
+
+/**
+ * Below `lg` the hero is a masthead: headline, one sub-line, and the figures
+ * as a chip rail bleeding to the screen edge. The `live` figure takes the
+ * success border and value. View at 390px.
+ */
+export const Masthead: Story = {
+  args: {
+    statsLabel: "Key figures",
+    eyebrow: "Updated today · next 14 days",
+    title: "Events in Cluj-Napoca",
+    intro:
+      "Everything on across the city for the next two weeks, from tonight's quizzes to the weekend's big rooms.",
+    stats: [
+      { value: "3", label: "on right now", tone: "live" },
+      { value: "76", label: "this fortnight" },
+      { value: "34", label: "venues" },
+      { value: "12", label: "free entry" },
+      { value: "18", label: "past midnight" },
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-surface-2 px-4 pt-4">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/event-hub-hero.tsx

@@ -5,9 +5,20 @@ import { cn } from "../lib/utils";
 import { Skeleton } from "./skeleton";
 
 /**
- * EventHubHero — the hub's opening block: an eyebrow, a big headline, an
- * intro line and a stats row on the left; an arbitrary slot (the poster
- * stack, in the source design) on the right. Stacks on mobile.
+ * EventHubHero — the hub's opening block. On desktop: an eyebrow, a big
+ * headline, an intro paragraph and a stats row on the left; an arbitrary slot
+ * (the poster stack, in the source design) on the right.
+ *
+ * BELOW `lg` IT IS A MASTHEAD, NOT A HERO. One headline line, the eyebrow
+ * demoted to a sub-line beneath it, no intro, and the figures as a swipeable
+ * rail of chips that bleeds to the screen edge. The first real content lands
+ * roughly 250px sooner than under the web-shaped hero — on a phone the page
+ * should show, not narrate. Same markup at every width; only the classes
+ * change, so the copy is authored once.
+ *
+ * A stat with `tone: "live"` is the one that is happening right now: its
+ * chip takes a `--success` border and value, the same live colour every
+ * events surface uses.
  *
  * All copy and stat values arrive pre-formatted — the DS holds no `Intl`
  * locale and does not format numbers.
@@ -16,6 +27,8 @@ import { Skeleton } from "./skeleton";
 export type EventHubHeroStat = {
   value: string;
   label: string;
+  /** `live` marks the figure that is happening right now. */
+  tone?: "default" | "live";
 };
 
 export type EventHubHeroProps = {
@@ -24,12 +37,28 @@ export type EventHubHeroProps = {
   title: string;
   intro: string;
   stats: EventHubHeroStat[];
+  /**
+   * Accessible name for the stats rail, e.g. "Key figures". When given, the
+   * rail is a named, focusable region so a keyboard can reach chips clipped
+   * by the phone's edge. Optional so existing consumers keep compiling — but
+   * pass it: without a name the rail cannot be focusable, and a phone reader
+   * on a keyboard cannot reach the last figures.
+   */
+  statsLabel?: string;
   /** The right-column slot — the poster stack in the source design. */
   aside?: React.ReactNode;
   className?: string;
 };
 
-export function EventHubHero({ eyebrow, title, intro, stats, aside, className }: EventHubHeroProps) {
+export function EventHubHero({
+  eyebrow,
+  title,
+  intro,
+  stats,
+  statsLabel,
+  aside,
+  className,
+}: EventHubHeroProps) {
   return (
     <div
       className={cn(
@@ -37,30 +66,70 @@ export function EventHubHero({ eyebrow, title, intro, stats, aside, className }:
         className
       )}
     >
-      <div className="flex flex-col gap-4">
-        <p className="text-[11.5px] font-extrabold tracking-[0.12em] text-muted-foreground">
+      <div className="flex flex-col gap-1.5 lg:gap-4">
+        {/* Eyebrow above the title on desktop; the sub-line beneath it on a
+            phone. `order` swaps the position, the classes swap the voice. */}
+        <p
+          className={cn(
+            "order-2 text-[13px] text-muted-foreground",
+            "lg:order-none lg:text-[11.5px] lg:font-extrabold lg:tracking-[0.12em]"
+          )}
+        >
           {eyebrow}
         </p>
 
-        <h1 className="text-[31px] font-black leading-[1.05] tracking-[-0.035em] text-foreground md:text-[42px] md:tracking-[-0.04em]">
+        <h1
+          className={cn(
+            "order-1 text-[26px] font-black leading-[1.1] tracking-[-0.035em] text-foreground",
+            "lg:order-none lg:text-[42px] lg:leading-[1.05] lg:tracking-[-0.04em]"
+          )}
+        >
           {title}
         </h1>
 
-        <p className="max-w-[520px] text-[14px] leading-[1.6] text-muted-foreground md:text-[15px] md:leading-[1.65]">
+        <p className="hidden max-w-[520px] text-[15px] leading-[1.65] text-muted-foreground lg:order-none lg:block">
           {intro}
         </p>
 
-        <div className="flex gap-[22px] pt-1.5 md:gap-[30px]">
-          {stats.map((stat) => (
-            <div key={stat.label} className="flex flex-col">
-              <span className="text-[24px] font-black leading-none tracking-[-0.03em] tabular-nums text-foreground md:text-[30px]">
-                {stat.value}
-              </span>
-              <span className="mt-1 text-[11px] text-muted-foreground md:mt-[5px] md:text-[12.5px]">
-                {stat.label}
-              </span>
-            </div>
-          ))}
+        {/* Figures. A chip rail below `lg` — `-mx-4 px-4` runs it under the
+            page gutter so the last chip is cut by the screen edge, which is
+            what says "swipe"; inline figures from `lg`. */}
+        <div
+          role={statsLabel ? "region" : undefined}
+          aria-label={statsLabel}
+          tabIndex={statsLabel ? 0 : undefined}
+          className={cn(
+            "order-3 -mx-4 flex gap-2 overflow-x-auto px-4 pt-2 scrollbar-hide",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "lg:order-none lg:mx-0 lg:gap-[30px] lg:overflow-visible lg:px-0 lg:pt-1.5"
+          )}
+        >
+          {stats.map((stat) => {
+            const isLive = stat.tone === "live";
+            return (
+              <div
+                key={stat.label}
+                className={cn(
+                  "flex min-w-[106px] shrink-0 flex-col rounded-[14px] border bg-card px-[13px] py-2.5",
+                  isLive ? "border-success/40" : "border-border",
+                  "lg:min-w-0 lg:rounded-none lg:border-0 lg:bg-transparent lg:p-0"
+                )}
+              >
+                <span
+                  className={cn(
+                    "text-[19px] font-black leading-none tracking-[-0.02em] tabular-nums",
+                    isLive ? "text-success" : "text-foreground",
+                    "lg:text-[30px] lg:tracking-[-0.03em]"
+                  )}
+                >
+                  {stat.value}
+                </span>
+                <span className="mt-0.5 text-[11px] text-muted-foreground lg:mt-[5px] lg:text-[12.5px]">
+                  {stat.label}
+                </span>
+              </div>
+            );
+          })}
         </div>
       </div>
 
@@ -84,21 +153,24 @@ export function EventHubHeroSkeleton({ aside, className }: EventHubHeroSkeletonP
         className
       )}
     >
-      <div className="flex flex-col gap-4">
-        <Skeleton className="h-[11.5px] w-28" />
+      <div className="flex flex-col gap-1.5 lg:gap-4">
+        <Skeleton className="order-2 h-[13px] w-40 lg:order-none lg:h-[11.5px] lg:w-28" />
 
-        <Skeleton className="h-[31px] w-full max-w-[420px] md:h-[42px]" />
+        <Skeleton className="order-1 h-[26px] w-full max-w-[420px] lg:order-none lg:h-[42px]" />
 
-        <div className="flex max-w-[520px] flex-col gap-1.5">
-          <Skeleton className="h-[14px] w-full md:h-[15px]" />
-          <Skeleton className="h-[14px] w-4/5 md:h-[15px]" />
+        <div className="hidden max-w-[520px] flex-col gap-1.5 lg:flex">
+          <Skeleton className="h-[15px] w-full" />
+          <Skeleton className="h-[15px] w-4/5" />
         </div>
 
-        <div className="flex gap-[22px] pt-1.5 md:gap-[30px]">
-          {Array.from({ length: 3 }, (_, index) => (
-            <div key={index} className="flex flex-col">
-              <Skeleton className="h-[24px] w-10 md:h-[30px]" />
-              <Skeleton className="mt-1 h-[11px] w-16 md:mt-[5px] md:h-[12.5px]" />
+        <div className="order-3 -mx-4 flex gap-2 overflow-hidden px-4 pt-2 lg:order-none lg:mx-0 lg:gap-[30px] lg:px-0 lg:pt-1.5">
+          {Array.from({ length: 4 }, (_, index) => (
+            <div
+              key={index}
+              className="flex min-w-[106px] shrink-0 flex-col rounded-[14px] border border-border bg-card px-[13px] py-2.5 lg:min-w-0 lg:rounded-none lg:border-0 lg:bg-transparent lg:p-0"
+            >
+              <Skeleton className="h-[19px] w-8 lg:h-[30px] lg:w-10" />
+              <Skeleton className="mt-0.5 h-[11px] w-16 lg:mt-[5px] lg:h-[12.5px]" />
             </div>
           ))}
         </div>

package/src/components/event-list-row.stories.tsx

@@ -157,3 +157,37 @@ export const ADay: Story = {
     </div>
   ),
 };
+
+/**
+ * Inside a dated group the heading names the day, so the row drops its badge
+ * and leads with the poster. This is the list view's shipped shape.
+ */
+export const InDatedGroup: Story = {
+  render: () => (
+    <div className="flex flex-col">
+      <EventListRow
+        event={event("g1", "Hat Design Workshop with Matira Hats", "Del Mars", "2026-09-07T17:00:00", 795)}
+        labels={labels}
+        formatters={formatters}
+        tags={["Workshop"]}
+        hideDate
+        hideRule
+      />
+      <EventListRow
+        event={event("g2", "International Quiz at Yolka", "Yolka", "2026-09-07T19:00:00", 0)}
+        labels={labels}
+        formatters={formatters}
+        tags={["Drinks", "Games"]}
+        isLive
+        hideDate
+      />
+      <EventListRow
+        event={event("g3", "Klausen Quiz by GOtrivia", "Klausen Pubhouse", "2026-09-07T20:00:00", 20)}
+        labels={labels}
+        formatters={formatters}
+        tags={["Drinks", "Games"]}
+        hideDate
+      />
+    </div>
+  ),
+};

package/src/components/event-list-row.test.tsx

@@ -0,0 +1,53 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { EventListRow } from "./event-list-row";
+import type { EventDateBadgeFormatters, EventListRowLabels, EventPreview } from "./event-types";
+
+const labels: EventListRowLabels = { free: "Free", liveNow: "Live now", soldOut: "Sold out" };
+
+const formatters: EventDateBadgeFormatters = {
+  time: () => "20:00",
+  day: () => "Mon, Sep 7",
+  price: (amount) => `${amount} RON`,
+  dayNumber: () => "07",
+  monthShort: () => "SEP",
+};
+
+const event: EventPreview = {
+  id: "e1",
+  title: "Klausen Quiz by GOtrivia",
+  location: "Klausen Pubhouse",
+  starts_at: "2026-09-07T20:00:00Z",
+  place_name: "Klausen Pubhouse",
+  entry_fee: 20,
+};
+
+describe("EventListRow", () => {
+  it("renders the date badge by default and drops it with hideDate", () => {
+    const { rerender } = render(<EventListRow event={event} labels={labels} formatters={formatters} />);
+    expect(screen.getByText("07")).toBeInTheDocument();
+    expect(screen.getByText("SEP")).toBeInTheDocument();
+
+    rerender(<EventListRow event={event} labels={labels} formatters={formatters} hideDate />);
+    expect(screen.queryByText("07")).not.toBeInTheDocument();
+    expect(screen.queryByText("SEP")).not.toBeInTheDocument();
+  });
+
+  it("keeps the fee, the time and the venue with the badge gone", () => {
+    render(<EventListRow event={event} labels={labels} formatters={formatters} hideDate />);
+    expect(screen.getByText("20 RON")).toBeInTheDocument();
+    expect(screen.getByText("20:00")).toBeInTheDocument();
+    expect(screen.getByText("Klausen Pubhouse")).toBeInTheDocument();
+  });
+
+  it("replaces the fee with the sold-out chip", () => {
+    render(<EventListRow event={event} labels={labels} formatters={formatters} isSoldOut />);
+    expect(screen.getByText("Sold out")).toBeInTheDocument();
+    expect(screen.queryByText("20 RON")).not.toBeInTheDocument();
+  });
+
+  it("shows the live chip when isLive", () => {
+    render(<EventListRow event={event} labels={labels} formatters={formatters} isLive hideDate />);
+    expect(screen.getByText("Live now")).toBeInTheDocument();
+  });
+});

package/src/components/event-list-row.tsx

@@ -34,11 +34,17 @@ import {
  * has the width for one and its row root is a container rather than a single
  * anchor. If a CTA comes back here, it has to be a real one, not a span.
  *
- * NOTE ON WEIGHT: nothing in this row is heavier than 600, and only the title
- * and the date badge reach it. Eight of these stack per screen, and at that
- * density hierarchy comes from size and ink tier, not from weight — a field of
- * bold text has no foreground. `Free` is the one exception (600 plus
- * `text-success`), because it is an inducement rather than an attribute.
+ * NOTE ON WEIGHT: the title and the fee are the only bold things in this row.
+ * Eight of these stack per screen, and at that density hierarchy comes from
+ * size and ink tier as much as weight — so everything below the title line is
+ * regular, muted, and small. The fee is bold because it is the row's one
+ * inducement, and it sits on the TITLE line, right-aligned, where a price is
+ * read against the thing it buys rather than lost among the meta.
+ *
+ * NOTE ON THE DATE BADGE: `hideDate` drops it. Inside a dated group — the list
+ * view's "Today · Monday 7 September" separators — every row's badge repeats
+ * the heading eight times per screen; the heading carries the date and the
+ * rows carry the time. The badge stays available for undated lists.
  *
  * Same contract as the rest: DS-owned view model, injected labels and
  * formatters, plain `<img>`, anchor whenever `href` is given.
@@ -86,6 +92,11 @@ export type EventListRowProps = {
    * line. Same prop and same reason as `EventListRowWide` and `EventIndexRow`.
    */
   hideRule?: boolean;
+  /**
+   * Drops the leading date badge. Pass it when the rows sit under a dated
+   * heading that already names the day; the row then leads with its poster.
+   */
+  hideDate?: boolean;
 };
 
 export const EventListRow = memo(function EventListRow({
@@ -102,6 +113,7 @@ export const EventListRow = memo(function EventListRow({
   tags,
   fallback = <EventPosterFallback />,
   hideRule,
+  hideDate,
 }: EventListRowProps) {
   const [imgError, setImgError] = useState(false);
 
@@ -132,28 +144,35 @@ export const EventListRow = memo(function EventListRow({
           `isLive` alone, so the only filled badge on screen is the live one.
           The geometry is identical either way, so nothing shifts when the
           tint appears. */}
-      <div
-        className={cn("w-[42px] shrink-0 rounded-[9px] py-1.5 text-center", isLive && "bg-success/10")}
-      >
-        <div
-          className={cn(
-            "text-sm font-semibold leading-none tabular-nums",
-            isLive ? "text-success" : "text-foreground"
-          )}
-        >
-          {formatters.dayNumber(event.starts_at)}
-        </div>
+      {!hideDate && (
         <div
           className={cn(
-            "mt-[3px] text-[10px] font-semibold tracking-[0.06em]",
-            isLive ? "text-success" : "text-muted-foreground"
+            "w-[42px] shrink-0 rounded-[9px] py-1.5 text-center",
+            isLive && "bg-success/10",
           )}
         >
-          {formatters.monthShort(event.starts_at)}
+          <div
+            className={cn(
+              "text-sm font-semibold leading-none tabular-nums",
+              isLive ? "text-success" : "text-foreground",
+            )}
+          >
+            {formatters.dayNumber(event.starts_at)}
+          </div>
+          <div
+            className={cn(
+              "mt-[3px] text-[10px] font-semibold tracking-[0.06em]",
+              isLive ? "text-success" : "text-muted-foreground",
+            )}
+          >
+            {formatters.monthShort(event.starts_at)}
+          </div>
         </div>
-      </div>
+      )}
 
-      <div className="aspect-square w-[72px] shrink-0 overflow-hidden rounded-[9px] bg-muted">
+      {/* Portrait, for the same reason `EventCompactRow` gives: most posters
+          are 4:5 flyers and a square crop throws away the act and the date. */}
+      <div className="aspect-[4/5] w-[58px] shrink-0 overflow-hidden rounded-[10px] bg-muted">
         {showPoster ? (
           // eslint-disable-next-line @next/next/no-img-element
           <img
@@ -170,41 +189,30 @@ export const EventListRow = memo(function EventListRow({
       </div>
 
       <div className="min-w-0 flex-1">
-        {/* Full title, never clamped. The row is `items-start`, so extra lines
-            grow the row downward past the 72px poster instead of squeezing
-            anything. */}
-        <div className="text-[15px] font-semibold leading-[1.3] tracking-[-0.01em]">{event.title}</div>
-
-        {/* WHEN and WHERE, with the fee pinned right. Time leads because a
-            time-sorted day group scans down that column. No `·` between time
-            and venue: the `MapPin` is the field marker, so a dot as well is
-            two separators doing one job — the glyph costs 6px net, not 16.
-            The pin is the same one the filter rail uses for VENUE. */}
-        <div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
-          <span className="shrink-0 tabular-nums text-foreground">
-            {formatters.time(event.starts_at)}
-          </span>
-
-          <span className="flex min-w-0 flex-1 items-center gap-1">
-            <MapPin className="h-3 w-3 shrink-0" aria-hidden />
-            <span className="truncate">{venue}</span>
-          </span>
-
-          {/* A sold-out event's price is not a fact anyone needs, so the chip
-              takes the fee's slot rather than sitting beside it. The fee stays
-              on THIS line rather than joining the chips: it is the row's only
-              inducement, and among decorative chips it would either become one
-              or duplicate the live chip's green with a second meaning. */}
+        {/* TITLE with the fee pinned right. Full title, never clamped: the
+            row is `items-start`, so extra lines grow the row downward past
+            the poster instead of squeezing anything. The fee is the one bold
+            thing beside it; a sold-out event's price is not a fact anyone
+            needs, so the chip takes the fee's slot rather than sitting
+            beside it. */}
+        <div className="flex items-start gap-2.5">
+          <div className="min-w-0 flex-1 text-[14px] font-bold leading-[1.3] tracking-[-0.01em]">
+            {event.title}
+          </div>
           {isSoldOut ? (
-            <Tag size="sm" variant="quiet" className="shrink-0 whitespace-nowrap">
+            <Tag
+              size="sm"
+              variant="quiet"
+              className="shrink-0 whitespace-nowrap"
+            >
               {labels.soldOut}
             </Tag>
           ) : (
             priceText && (
               <span
                 className={cn(
-                  "shrink-0 tabular-nums",
-                  fee.kind === "free" && "font-semibold text-success"
+                  "shrink-0 text-[13.5px] font-extrabold tabular-nums",
+                  fee.kind === "free" ? "text-success" : "text-foreground",
                 )}
               >
                 {priceText}
@@ -213,32 +221,56 @@ export const EventListRow = memo(function EventListRow({
           )}
         </div>
 
-        {/* WHAT. Status first, then attributes. Live is the only FILLED chip
-            on the surface, exactly as it is the only filled date badge —
-            under deuteranopia the green/grey hues converge, so the fill and
-            the `Radio` glyph are what actually separate it, not the hue.
+        {/* WHEN and WHERE, then the live chip. Time leads because a
+            time-sorted day group scans down that column. The `MapPin` is the
+            venue's field marker, so the dot before it is the only separator.
+            Live is the only FILLED chip on the surface — under deuteranopia
+            the green/grey hues converge, so the fill and the `Radio` glyph
+            are what actually separate it, not the hue. */}
+        <div className="mt-1 flex items-center gap-1.5 text-[11.5px] text-muted-foreground">
+          <span className="shrink-0 font-mono tabular-nums">
+            {formatters.time(event.starts_at)}
+          </span>
+          <span aria-hidden className="text-border">
+            ·
+          </span>
+          <span className="flex min-w-0 items-center gap-1">
+            <MapPin className="h-3 w-3 shrink-0" aria-hidden />
+            <span className="truncate">{venue}</span>
+          </span>
+          {isLive && (
+            <Tag
+              size="sm"
+              variant="success"
+              className="shrink-0 whitespace-nowrap font-extrabold"
+            >
+              <Radio className="h-2.5 w-2.5" aria-hidden />
+              {labels.liveNow}
+            </Tag>
+          )}
+        </div>
 
-            `h-[22px] overflow-hidden` is the overflow mechanism: `TagGroup`
-            already wraps, so a chip that does not fit moves to a second line
-            that is clipped away, and it disappears WHOLE. No half-chips, no
-            ellipsis inside a pill, and it is width-safe for caller strings of
-            any length — which a fixed count is not. Deliberately no "+2"
-            counter: nothing in this row is tappable, so a counter would
-            promise a disclosure that does not exist, eight times per screen.
+        {/* WHAT. `h-[22px] overflow-hidden` is the overflow mechanism:
+            `TagGroup` already wraps, so a chip that does not fit moves to a
+            second line that is clipped away, and it disappears WHOLE. No
+            half-chips, no ellipsis inside a pill, and it is width-safe for
+            caller strings of any length — which a fixed count is not.
+            Deliberately no "+2" counter: nothing in this row is tappable, so
+            a counter would promise a disclosure that does not exist, eight
+            times per screen.
 
             The line collapses when there is nothing to say. A "Tags" filler
             would be the same mistake as "Price TBA" — the row's spare slot
             announcing an absence. */}
-        {(isLive || (tags && tags.length > 0)) && (
+        {tags && tags.length > 0 && (
           <TagGroup className="mt-1.5 h-[22px] overflow-hidden">
-            {isLive && (
-              <Tag size="sm" variant="success" className="shrink-0 whitespace-nowrap">
-                <Radio className="h-2.5 w-2.5" aria-hidden />
-                {labels.liveNow}
-              </Tag>
-            )}
-            {tags?.map((tag) => (
-              <Tag key={tag} size="sm" variant="quiet" className="shrink-0 whitespace-nowrap">
+            {tags.map((tag) => (
+              <Tag
+                key={tag}
+                size="sm"
+                variant="quiet"
+                className="shrink-0 whitespace-nowrap"
+              >
                 {tag}
               </Tag>
             ))}
@@ -249,14 +281,14 @@ export const EventListRow = memo(function EventListRow({
   );
 
   const rootClasses = cn(
-    // `py-3`, not `py-3.5`: the chip line adds a third line back, and 8px of
-    // padding pays for most of it. Rows with a one-line title and no chips are
-    // still poster-driven and end up SHORTER than before.
-    "relative flex w-full items-start gap-3 py-3 text-left",
+    // `py-[11px]`: the poster is 72px tall and a one-line title, meta and a
+    // chip line come to ~70px, so the row is poster-driven at ~94px — about
+    // eight per screen, which is the list view's reason to exist.
+    "relative flex w-full items-start gap-3 py-[11px] text-left",
     isSoldOut && "opacity-60",
     (href || onClick) &&
       "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-    className
+    className,
   );
 
   if (href) {
@@ -264,7 +296,9 @@ export const EventListRow = memo(function EventListRow({
       <LinkComponent
         href={href}
         className={rootClasses}
-        onClick={onClick ? (mouseEvent) => onClick(event, mouseEvent) : undefined}
+        onClick={
+          onClick ? (mouseEvent) => onClick(event, mouseEvent) : undefined
+        }
       >
         {body}
       </LinkComponent>
@@ -273,7 +307,11 @@ export const EventListRow = memo(function EventListRow({
 
   if (onClick) {
     return (
-      <button type="button" className={rootClasses} onClick={(e) => onClick(event, e)}>
+      <button
+        type="button"
+        className={rootClasses}
+        onClick={(e) => onClick(event, e)}
+      >
         {body}
       </button>
     );
@@ -285,6 +323,8 @@ export const EventListRow = memo(function EventListRow({
 export type EventListRowSkeletonProps = {
   /** Matches `EventListRowProps["hideRule"]` — drop the top rule on the first row of a day group. */
   hideRule?: boolean;
+  /** Matches `EventListRowProps["hideDate"]`. */
+  hideDate?: boolean;
   /** Reserve the chip line. Matches the real row, where it collapses on events with no live status and no tags. */
   showTags?: boolean;
   className?: string;
@@ -293,34 +333,42 @@ export type EventListRowSkeletonProps = {
 /** Mirrors `<EventListRow>`'s geometry exactly so nothing shifts when data lands. */
 export function EventListRowSkeleton({
   hideRule,
+  hideDate,
   showTags = true,
   className,
 }: EventListRowSkeletonProps) {
   return (
     <div
       aria-hidden="true"
-      className={cn("relative flex w-full items-start gap-3 py-3 text-left", className)}
+      className={cn(
+        "relative flex w-full items-start gap-3 py-[11px] text-left",
+        className,
+      )}
     >
       {!hideRule && <Separator className="absolute inset-x-0 top-0" />}
 
-      <div className="w-[42px] shrink-0 rounded-[9px] py-1.5 text-center">
-        <Skeleton className="mx-auto h-4 w-5" />
-        <Skeleton className="mx-auto mt-[3px] h-[10px] w-6" />
-      </div>
+      {!hideDate && (
+        <div className="w-[42px] shrink-0 rounded-[9px] py-1.5 text-center">
+          <Skeleton className="mx-auto h-4 w-5" />
+          <Skeleton className="mx-auto mt-[3px] h-[10px] w-6" />
+        </div>
+      )}
 
-      <Skeleton className="aspect-square w-[72px] shrink-0 rounded-[9px]" />
+      <Skeleton className="aspect-[4/5] w-[58px] shrink-0 rounded-[10px]" />
 
       <div className="min-w-0 flex-1">
-        <div className="space-y-1">
-          <Skeleton className="h-[15px] w-full" />
-          <Skeleton className="h-[15px] w-2/3" />
+        <div className="flex items-start gap-2.5">
+          <div className="min-w-0 flex-1 space-y-1">
+            <Skeleton className="h-[14px] w-full" />
+            <Skeleton className="h-[14px] w-2/3" />
+          </div>
+          <Skeleton className="h-[13.5px] w-12 shrink-0" />
         </div>
 
-        <div className="mt-1 flex items-center gap-2">
+        <div className="mt-1 flex items-center gap-1.5">
           <Skeleton className="h-3 w-10" />
           <Skeleton className="h-3 w-3 shrink-0 rounded-full" />
           <Skeleton className="h-3 w-24" />
-          <Skeleton className="ml-auto h-3 w-12" />
         </div>
 
         {showTags && (