fix: align sidebar counts in a single right column

The previous count-alignment fix used invisible group-hover:visible for
hover-only buttons, but invisible still reserves layout space. Folder
rows had a permanent kebab slot that non-folder rows didn't, and active
heap rows had a Target indicator before the count — both shifted their
counts left of the rest. The result was visually misaligned counts.

- LeftSidebar folder kebab + HeapsPanel kebab/set-active: switch to
  hidden group-hover:block so the slot occupies zero width in the
  resting state. Counts now sit at the same right edge across folder,
  non-folder, and heap rows.
- HeapsPanel: drop the standalone Target indicator from active heap
  rows. Active state is signaled by the bold name (font-semibold)
  already, and removing the indicator lets the heap count column line
  up with everything else.
- Both kebab wrappers also use hidden group-hover:block on the wrapper
  div so the menu trigger truly takes 0 width when not hovered.

On hover the kebab appears to the right of the count and pushes it
slightly left, as the user requested ("on hover we can push them to
make space for the burger").

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-08 20:57:11 +02:00
parent f05ae77ef0
commit 4e5b2cabf6
2 changed files with 27 additions and 25 deletions

View File

@@ -537,24 +537,28 @@ export function LeftSidebar() {
<span className="h-5 min-w-[24px] flex-shrink-0" aria-hidden="true" />
)}
{/* Folder kebab menu — only on folder rows. Hidden until hover
* (or when its menu is open) so the count column stays aligned
* in the resting state. */}
{/* Folder kebab menu — only on folder rows. Hidden (display:none)
* until hover so it reserves NO width in the resting state and
* the count column stays aligned across folder + non-folder
* rows. On hover it appears to the right, pushing the count
* left to make room. */}
{item.id.startsWith('folder-') &&
(() => {
const folderId = item.id.slice('folder-'.length)
const isMenuOpen = openMenuId === item.id
return (
<div className="relative flex-shrink-0">
<div
className={clsx(
'relative flex-shrink-0',
isMenuOpen ? 'block' : 'hidden group-hover:block'
)}
>
<button
onClick={(e) => {
e.stopPropagation()
setOpenMenuId(isMenuOpen ? null : item.id)
}}
className={clsx(
'rounded p-0.5 text-text-muted hover:bg-surface-offset hover:text-text',
isMenuOpen ? 'visible' : 'invisible group-hover:visible'
)}
className="rounded p-0.5 text-text-muted hover:bg-surface-offset hover:text-text"
title="More actions"
aria-label="More folder actions"
aria-haspopup="menu"