Two follow-ups to the AnnouncementBar merged in PR #1506:
CSS: switch #quarto-announcement from align-items: center to align-items: flex-start. With the 3–4 content lines the bar typically carries, centering floated the megaphone icon to the middle of the bar and read as a layout bug. Now matches the Quarto sibling sites' presentation where the megaphone sits on line 1's baseline.
Dismiss gated on live deploy: the × is now shown only when IS_LIVE_DEPLOY (new boolean in src/lib/env.ts) is true. On the dev-preview deploy (harvard-edge.github.io/cs249r_book_dev) the bar is intentionally persistent — every pageview during development should see the ecosystem pitch. On live (mlsysbook.ai) the bar becomes dismissable so returning visitors aren't nagged. Piggybacks on the existing NEXT_PUBLIC_ECOSYSTEM_BASE — no new env var.
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.
## 📋 Pull Request Information
**Original PR:** https://github.com/harvard-edge/cs249r_book/pull/1509
**Author:** [@profvjreddi](https://github.com/profvjreddi)
**Created:** 4/24/2026
**Status:** ✅ Merged
**Merged:** 4/24/2026
**Merged by:** [@profvjreddi](https://github.com/profvjreddi)
**Base:** `dev` ← **Head:** `fix/staffml-banner-polish`
---
### 📝 Commits (1)
- [`8141a01`](https://github.com/harvard-edge/cs249r_book/commit/8141a019a0ebb4b0ee9f481510ca323e12d6fd46) fix(staffml/announcement): top-align megaphone icon + gate dismiss on live
### 📊 Changes
**3 files changed** (+25 additions, -2 deletions)
<details>
<summary>View changed files</summary>
📝 `interviews/staffml/src/app/globals.css` (+5 -1)
📝 `interviews/staffml/src/components/AnnouncementBar.tsx` (+8 -1)
📝 `interviews/staffml/src/lib/env.ts` (+12 -0)
</details>
### 📄 Description
## Summary
Two follow-ups to the `AnnouncementBar` merged in PR #1506:
1. **CSS**: switch `#quarto-announcement` from `align-items: center` to `align-items: flex-start`. With the 3–4 content lines the bar typically carries, centering floated the megaphone icon to the middle of the bar and read as a layout bug. Now matches the Quarto sibling sites' presentation where the megaphone sits on line 1's baseline.
2. **Dismiss gated on live deploy**: the × is now shown only when `IS_LIVE_DEPLOY` (new boolean in `src/lib/env.ts`) is true. On the dev-preview deploy (`harvard-edge.github.io/cs249r_book_dev`) the bar is intentionally persistent — every pageview during development should see the ecosystem pitch. On live (`mlsysbook.ai`) the bar becomes dismissable so returning visitors aren't nagged. Piggybacks on the existing `NEXT_PUBLIC_ECOSYSTEM_BASE` — no new env var.
## Files
- `interviews/staffml/src/app/globals.css` — one-line CSS change
- `interviews/staffml/src/lib/env.ts` — add `IS_LIVE_DEPLOY` boolean
- `interviews/staffml/src/components/AnnouncementBar.tsx` — consume `IS_LIVE_DEPLOY` to gate dismiss
## Verification (Playwright)
Dev mode (`NEXT_PUBLIC_ECOSYSTEM_BASE=https://harvard-edge.github.io/cs249r_book_dev`):
- `has × action in DOM? false` ✓
- Bar renders with megaphone top-aligned on line 1 ✓
Live mode (default):
- `has × action in DOM? true` ✓
- × sits at top-right, aligned with line 1 ✓
- Click × → `.hidden` class → `sessionStorage["quarto-announcement-dismissed-{hash}"] = "1"` → persists across reload ✓
## Test plan
- [x] TypeScript `tsc --noEmit` clean
- [x] Dev-mode Playwright screenshot: megaphone top-aligned, no ×
- [x] Live-mode Playwright screenshot: megaphone top-aligned, × visible
- [x] Dismiss + persistence still works on live
---
<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 Pull Request Information
Original PR: https://github.com/harvard-edge/cs249r_book/pull/1509
Author: @profvjreddi
Created: 4/24/2026
Status: ✅ Merged
Merged: 4/24/2026
Merged by: @profvjreddi
Base:
dev← Head:fix/staffml-banner-polish📝 Commits (1)
8141a01fix(staffml/announcement): top-align megaphone icon + gate dismiss on live📊 Changes
3 files changed (+25 additions, -2 deletions)
View changed files
📝
interviews/staffml/src/app/globals.css(+5 -1)📝
interviews/staffml/src/components/AnnouncementBar.tsx(+8 -1)📝
interviews/staffml/src/lib/env.ts(+12 -0)📄 Description
Summary
Two follow-ups to the
AnnouncementBarmerged in PR #1506:CSS: switch
#quarto-announcementfromalign-items: centertoalign-items: flex-start. With the 3–4 content lines the bar typically carries, centering floated the megaphone icon to the middle of the bar and read as a layout bug. Now matches the Quarto sibling sites' presentation where the megaphone sits on line 1's baseline.Dismiss gated on live deploy: the × is now shown only when
IS_LIVE_DEPLOY(new boolean insrc/lib/env.ts) is true. On the dev-preview deploy (harvard-edge.github.io/cs249r_book_dev) the bar is intentionally persistent — every pageview during development should see the ecosystem pitch. On live (mlsysbook.ai) the bar becomes dismissable so returning visitors aren't nagged. Piggybacks on the existingNEXT_PUBLIC_ECOSYSTEM_BASE— no new env var.Files
interviews/staffml/src/app/globals.css— one-line CSS changeinterviews/staffml/src/lib/env.ts— addIS_LIVE_DEPLOYbooleaninterviews/staffml/src/components/AnnouncementBar.tsx— consumeIS_LIVE_DEPLOYto gate dismissVerification (Playwright)
Dev mode (
NEXT_PUBLIC_ECOSYSTEM_BASE=https://harvard-edge.github.io/cs249r_book_dev):has × action in DOM? false✓Live mode (default):
has × action in DOM? true✓.hiddenclass →sessionStorage["quarto-announcement-dismissed-{hash}"] = "1"→ persists across reload ✓Test plan
tsc --noEmitclean🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.