bug: feed settings cog icon overlaps the feed's unread-count badge on hover #294

Reported by: Simon, 22 Sep 2026, while working through the Reed backlog outside a live session.

Context: AppSidebar.vue. The unread-count badge (line 49) is the last child inside the feed's .view button, right-aligned within it. The settings cog button (line 51, .feed-gear) is a sibling element, absolutely positioned via CSS at right: var(--space-1); top: 50% (line 174), i.e. pinned to the same right edge of the <li>. It's hidden by default (opacity: 0) and only shown on hover/focus (lines 175-176), which is exactly when it collides with the badge, both controls end up targeting the same screen position.

<span v-if="feed.unread_count" class="badge">{{ feed.unread_count }}</span>
...
<button class="feed-gear icon-btn" ... >⚙</button>

.feed-gear { position: absolute; right: var(--space-1); top: 50%; transform: translateY(-50%); opacity: 0; }

Proposed fix: give the gear icon its own reserved slot rather than absolute-positioning it over the badge's territory, for example: fade the unread badge out (or shrink/reposition it) when the row is hovered and the gear is shown, or reserve permanent horizontal space for the gear so the badge never needs to share the same right-edge position in the first place.

Why it matters: on any feed with an unread count, hovering to reach settings currently means clicking through visually overlapping controls, straightforward interaction bug, not just cosmetic.