fete/specs/017-watch-event/issues.md

Visual Issues: Bookmark Icon on Event Detail Page

Date: 2026-03-12 Branch: 017-watch-event File: frontend/src/views/EventDetailView.vue

Issue 1: Meta icons have hover effect

Problem: The <dt class="detail__meta-icon glass"> elements (date, location, attendees) change background/border color on hover. These are non-interactive <dt> elements — they should not react to hover.

Root cause: The global .glass:hover rule in frontend/src/assets/main.css:247:

.glass:hover:not(input):not(textarea):not(.btn-primary) {
  background: var(--color-glass-hover);
  border-color: var(--color-glass-border-hover);
}

This applies to ALL .glass elements including the static meta icons. Scoped CSS overrides don't win because the global rule has equal or higher specificity.

Fix options:

• A) Remove glass class from meta icons, replicate the static glass styles in scoped CSS
• B) Add .glass--static modifier that opts out of hover, use it on meta icons
• C) Add :not(.detail__meta-icon) to the global rule (leaks component knowledge into global CSS — bad)

Option A is cleanest — meta icons only need the static glass background, not the full interactive glass behavior.

Issue 2: Glow effect on bookmark is ugly

Problem: The accent-colored box-shadow glow around the bookmark icon looks bad visually.

Current CSS:

.detail__bookmark {
  border-color: var(--color-accent);
  box-shadow: 0 0 6px rgba(255, 112, 67, 0.15);
}
.detail__bookmark--filled {
  box-shadow: 0 0 8px rgba(255, 112, 67, 0.3);
}

Fix: Remove the glow entirely. Differentiate the bookmark from inert meta icons through a different, subtler approach — e.g. a slightly brighter/different border color, or rely solely on the cursor change and active/focus states.

Issue 3: Filled bookmark should use same icon color as unfilled

Problem: Filled bookmark uses color: var(--color-accent) (orange), unfilled uses color: var(--color-text-on-gradient) (white/light). User wants both states to use the same color.

Current CSS:

.detail__bookmark--filled {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

Fix: Remove color: var(--color-accent) from .detail__bookmark--filled. The SVG fill attribute is already controlled by :fill="eventIsStored ? 'currentColor' : 'none'" in the template — so filled state will use currentColor (which inherits from the parent), and unfilled state will be outline-only. Both will be the same color (--color-text-on-gradient).

Issue 4: Icons not centered in their boxes

Problem: SVGs inside the 36x36 glass boxes (both bookmark and meta icons) are shifted slightly to the right. The centering is off despite display: flex; align-items: center; justify-content: center.

Root cause: SVGs rendered inline have implicit line-height whitespace. The line-height: 0 fix was added to .detail__bookmark and .detail__meta-icon but the meta icon override may not be applying due to specificity issues with the glass class, or the SVGs themselves may need display: block.

Context: The <dt> element defaults to display: block but the SVG inside is inline. The flex container should handle it, but browser rendering of inline SVGs inside flex containers can be inconsistent.

Fix options:

• Add display: block to the SVGs directly via a scoped rule: .detail__meta-icon svg, .detail__bookmark svg { display: block; }
• Or ensure line-height: 0 is actually applying (check specificity)

Screenshot reference

User-provided screenshot showing the issues: /home/nitrix/Pictures/Screenshot_20260312_215543.png