Long-press ring sits below the raised centre item in the bottom nav

[OffCrazyFreak]

What

Long-pressing a bottom-nav item draws the hold progress ring. On the four flanking cells the ring is concentric with the icon, which is correct. On the raised centre cell (Proizvodi) the ring sits about 3px too low, so it reads as slightly off from the green circle it is meant to wrap.

Why

The ring is positioned against the button box, identically for all five cells. frontend/src/components/custom/bottom-nav/bottom-nav-classes.ts:26:

export const CELL_DISC_CLASS =
  "absolute top-1/2 left-1/2 size-[3.6rem] -translate-x-1/2 -translate-y-1/2";

The centre cell's raise is applied only to the filled green circle, not to the cell or the button. frontend/src/components/custom/bottom-nav/bottom-nav-center-item.tsx:78:

"bg-primary text-primary-foreground relative flex size-[2.8rem] -translate-y-[0.2rem] items-center justify-center rounded-full ..."

The ring is rendered as a sibling before that span (bottom-nav-center-item.tsx:71-73), so it is outside the translated element. Because the raise is a transform it changes no layout, the button box does not move, and top-1/2 still resolves to the unraised centre. The green circle goes up 0.2rem (about 3.2px), the ring stays put.

The flanking cells (bottom-nav-item.tsx:89 and :96) have no such offset, everything sits in one unshifted flex column, so they look right.

The gap is legible because the ring is 3.6rem and the centre circle only 2.8rem, so the ring never touches the circle's edge and a 3px shift is easy to see.

Notes

• The comment directly above CELL_DISC_CLASS (bottom-nav-classes.ts:22-24) asserts "The disc and both rings share it, which is what keeps them concentric". That invariant is silently false for the centre cell, and the comment should be corrected or the code made to match it.
• The active indicator (bottom-nav-indicator.tsx) uses the same CELL_DISC_CLASS, so it carries the same offset on the centre cell. It is invisible there only because useIndicatorOpacity fades it to 0, so this is latent rather than a second visible bug.
• docs/MOBILE-NAV.md describes the centre cell as raised but never says how, and its concentric-circles claim is scoped to non-centre cells. Worth a line once fixed.
• While in the file: docs/MOBILE-NAV.md:715 and :722 point at bottom-nav/bottom-nav-ring.tsx and bottom-nav/use-long-press-timer.ts, which have moved to common/hold-progress-ring.tsx and hooks/use-long-press-timer.ts.

Possible fixes

Not prescribing one, but the options are roughly:

1. Move the -translate-y-[0.2rem] off the circle span and onto a wrapper that encloses both the ring and the circle. Cleanest, keeps one source of truth for the raise.
2. Apply the same offset to the ring on the centre cell only, by composing an extra class onto CELL_DISC_CLASS. Smallest diff, but duplicates the magic number.
3. Express the raise as a CSS variable on the cell that both elements consume, so they cannot drift again.

Option 1 or 3 also fixes the latent indicator offset for free.

Small. It is a positioning bug, not a behavioural one.