IHNYC Platform Docs

Wider serving-hours cards

Shipped4 min read

Table of Contents

Reviewed by /plan-design-review on 2026-05-21 Branch: dghauri0/widen-serving-hours-cards Repo: ihnyc/avi-pub-landing Status: SHIPPED (PR #64)

Problem Statement

After the bar-TV split shipped, the Pub Serving Hours This Week panel on /bar-tv-right was using only ~40% of its allotted height. With three open days that week (Wed/Thu/Fri at 76px each), the grid filled ~261px of a 629px panel, leaving ~260px (24% of the right TV’s vertical space) as dead black space below the day rows.

Two additional issues surfaced during the audit:

  1. Heading wrap — 🍺 Pub Serving Hours This Week (week of May 17) wrapped to two lines, with the AVI logo at top-right of the heading fighting the wrapped title for inline space. The “(week of May 17)” parenthetical bled to a third line.
  2. Ambiguous arrow glyph — Between the start and end times, the renderer emitted a ↓ (down-arrow) which reads as “drops to” rather than “from… to…“.

Constraints

  • 1920×1080 viewing surface, mounted on a wall, read from across a pub room.
  • Side-by-side panel layout — pub-hours shares the right-TV slide canvas with the Coming Up events panel as a 2-column CSS grid (grid-template-columns: 1.15fr 1fr).
  • Same shared styles.css and script.js serve /bar-tv-left, /bar-tv-right, and the legacy /tv route — changes must be scoped via the body.bar-tv-right selector so legacy /tv is unaffected.
  • The JS renderer (renderPubHoursWeek() in public/tv/script.js) only renders open days, falling back to all days only if no day is marked open. Most weeks the pub opens 3–5 days.

Approaches Considered

Option A — Stretch to fill (flex: 1 rows)

Auto-grow each day row to consume the panel height. With 3 days → ~165px each; with 7 days → ~70px each. Zero dead space at any count. Rejected — on slow weeks (1–2 open days) the rows balloon to cartoonish sizes.

Option B — Bigger fixed cards (~120px) (chosen)

Bump padding 0.7rem 1.1rem → 1.4rem 1.5rem and type scale 1.65/1.7vw → 2.0/2.1vw for non-today rows, 0.95rem → 1.6rem padding and 2.05vw → 2.35vw type for today’s gold-highlighted row. Each row becomes ~130px regardless of day count. Pair with an “Open Wed–Fri” subtitle on the heading so visitors still see when the pub is closed without rendering ghost rows.

Option C — Show all 7 days, dim the closed ones

Render every day, apply opacity: 0.45 to closed days. Tells the full week story; panel always feels balanced. Rejected — open days lose per-card prominence (~64px each at 7 cards), and the closure days don’t earn their pixels when the heading subtitle (Option B) communicates the same information more concisely.

Option B + bundled cleanup of the two adjacent issues.

  • Cards — padding: 1.4rem 1.5rem, type 2.0vw / 2.1vw (label / start+end), today gets padding: 1.6rem 1.75rem and 2.35vw type.
  • Heading restructure — panel-heading becomes flex-direction: column with two children:
    • panel-heading-top (icon + title + AVI logo on one row, AVI pinned with margin-left: auto — title gets white-space: nowrap; overflow: hidden; text-overflow: ellipsis so it can’t wrap)
    • panel-heading-subtitle (open-range + middot + (week of X))
  • Open-range subtitle — Computed from the openDays array in renderPubHoursWeek(). Three shapes: Open Wed only (1 day), Open Wed–Fri (contiguous), Open Wed · Fri (gapped). Element lookup (#pub-hours-open-range) is null-safe so the legacy /tv page (no subtitle slot) is a no-op.
  • Arrow swap — ↓ → → in renderPubHoursWeek(). Marked aria-hidden="true" since start/end already convey the relationship.
  • Cache-busters — ?v=20260521c → ?v=20260521d on all three TV entry points (/tv/, /bar-tv-left/, /bar-tv-right/).

Before / After Measurements (1920×1080)

ElementBeforeAfter
Heading height108px (2-line wrap)~95px (1 line + subtitle)
Card height (non-today)76px~130px
Card height (today)95px~150px
Hours grid total261px (3 days)~520px (3 days)
Panel dead space below grid~260px~50px
Arrow↓→

Implementation Notes for Future Sessions

  • The scoped CSS lives at the bottom of public/tv/styles.css under body.bar-tv-right .panel--pub-hours .panel-heading-* selectors. New subtitle/top rows are bar-tv-right-only — global .panel-heading keeps its flex-row default for the legacy /tv page’s untouched layout.
  • The split-day subtitle logic is in renderPubHoursWeek() (public/tv/script.js ~line 1059). pub-hours-open-range and pub-hours-subtitle-sep element lookups are nullable for backward-compatibility.
  • If the pub later opens 6+ days, the fixed-card sizing math still fits: 6 × ~130px + 5 × 8px gaps = ~820px, comfortably within the 521px-after-heading space when the panel is sized for max history. Verify visually if that becomes the norm.
  • Predecessor: 2026-05-20-bar-tv-split (Phase 1 layout split + side-by-side panel grid).
  • Sibling: Now Playing hero card on bar-tv-right (PR #59 / #62, Phase 2 of the bar-TV-split plan).