From 604525e64c46dfcb74fa3f779462f57af8d5d616 Mon Sep 17 00:00:00 2001
From: Brian Krabach <brkrabac@microsoft.com>
Date: Fri, 27 Mar 2026 15:32:39 -0700
Subject: [PATCH] fix: bell badge sizing, text contrast, and empty timestamp
 display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- .tile-bell: inline-flex badge (min-width:16px height:16px) so it's a
  circle for single digits, pill for '9+'; was display:inline so
  width/height were ignored → oval shape
- .tile-bell color: #0D1117 (dark on amber) — was inheriting muted gray
  from .tile-meta, making count illegible
- formatTimestamp(null): return '' instead of em-dash '—' which rendered
  as a confusing glyph in the tile meta area
---
 frontend/app.js             |  2 +-
 frontend/style.css          | 20 ++++++++++++++------
 frontend/tests/test_app.mjs |  4 ++--
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/frontend/app.js b/frontend/app.js
index b4a1654..52c709a 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -6,7 +6,7 @@
  * @returns {string}
  */
 function formatTimestamp(ts) {
-  if (ts == null) return '\u2014';
+  if (ts == null) return '';
   const diff = Math.floor(Date.now() / 1000 - ts);
   if (diff < 60) return `${diff}s ago`;
   if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
diff --git a/frontend/style.css b/frontend/style.css
index 771be58..279d654 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -182,15 +182,23 @@ body {
   margin-left: 8px;
 }
 
-/* Bell dot */
+/* Bell notification badge */
 .tile-bell {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 3px;
+  border-radius: 8px;
   background: var(--bell);
-  animation: bell-pulse 1.4s ease-in-out infinite;
-  margin-right: 6px;
+  color: #0D1117;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
   flex-shrink: 0;
+  margin-right: 6px;
+  animation: bell-pulse 1.4s ease-in-out infinite;
 }
 
 @keyframes bell-pulse {
diff --git a/frontend/tests/test_app.mjs b/frontend/tests/test_app.mjs
index 4bb8c06..656a7c5 100644
--- a/frontend/tests/test_app.mjs
+++ b/frontend/tests/test_app.mjs
@@ -62,8 +62,8 @@ test('app.js exports all 7 pure functions', () => {
 
 // --- formatTimestamp ---
 
-test('formatTimestamp returns em-dash for null', () => {
-  assert.strictEqual(app.formatTimestamp(null), '\u2014');
+test('formatTimestamp returns empty string for null', () => {
+  assert.strictEqual(app.formatTimestamp(null), '');
 });
 
 test('formatTimestamp returns seconds ago for timestamp < 60s ago', () => {