What task are you trying to do?
Stop the top-level session row title from shrinking by 24px on hover. The right-side action slot (the ... dots menu) transitions from w-0 to w-6 when the row is hovered (packages/app/src/pages/layout/sidebar-items.tsx:230-238), which compresses the title's flex-1 area and causes a visible truncation jump for long titles.
Context
#150 merged the left-side pin and status slots into a single reserved 24px column, stabilizing the title's left baseline at 53px. Playwright measurement on the merged branch confirms the title width still drops from 264px (idle) to 240px (hover) — the 24px delta is this action slot.
The truncation shift is not a layout reflow of neighbors (each row measures independently), but it is visually disruptive when a long title suddenly loses its last characters on hover.
Which audience does this matter to most?
Both
What would a good result look like?
The title width is the same whether the row is idle, hovered, focus-within, or has its context menu open. The ... menu remains reachable via mouse hover and keyboard focus. Mobile behavior (w-6 opacity-100 always) is unchanged.
Extra context
Approaches to evaluate
A. Always-reserved 24px slot — mirror the left status slot: set w-6 opacity-0 pointer-events-none by default and only flip opacity / pointer-events on hover and focus-within. Pro: symmetric, title width is fully stable. Con: every top-level row permanently reserves 24px on the right even when not hovered; feels heavier.
B. Absolute overlay — position the action slot as absolute right-3 top-1/2 -translate-y-1/2 size-6 on the outer SessionItem wrapper, so it does not participate in the inline flex layout. Pro: title owns all horizontal space. Con: on hover the ... overlaps the title's truncation ellipsis; may need a short gradient fade or explicit right padding on the title when hovered to avoid that.
C. Hybrid — always reserve 24px for top-level rows (approach A), but also drop the pr-3 outer padding so the slot sits at the row's right edge. Effectively keeps layout stable without growing the row width further.
Manual verification
- Long-title top-level row: hover and confirm truncation position does not change.
- Tab through the sidebar:
... menu reachable via keyboard.
- Mobile viewport:
... visible and tappable by default, no hover dependency.
- Nested child sessions: no action slot rendered (existing behavior unchanged by
<Show when={!props.level}>).
Related
What task are you trying to do?
Stop the top-level session row title from shrinking by 24px on hover. The right-side action slot (the
...dots menu) transitions fromw-0tow-6when the row is hovered (packages/app/src/pages/layout/sidebar-items.tsx:230-238), which compresses the title'sflex-1area and causes a visible truncation jump for long titles.Context
#150 merged the left-side pin and status slots into a single reserved 24px column, stabilizing the title's left baseline at 53px. Playwright measurement on the merged branch confirms the title width still drops from 264px (idle) to 240px (hover) — the 24px delta is this action slot.
The truncation shift is not a layout reflow of neighbors (each row measures independently), but it is visually disruptive when a long title suddenly loses its last characters on hover.
Which audience does this matter to most?
Both
What would a good result look like?
The title width is the same whether the row is idle, hovered, focus-within, or has its context menu open. The
...menu remains reachable via mouse hover and keyboard focus. Mobile behavior (w-6 opacity-100always) is unchanged.Extra context
Approaches to evaluate
A. Always-reserved 24px slot — mirror the left status slot: set
w-6 opacity-0 pointer-events-noneby default and only flip opacity / pointer-events on hover and focus-within. Pro: symmetric, title width is fully stable. Con: every top-level row permanently reserves 24px on the right even when not hovered; feels heavier.B. Absolute overlay — position the action slot as
absolute right-3 top-1/2 -translate-y-1/2 size-6on the outer SessionItem wrapper, so it does not participate in the inline flex layout. Pro: title owns all horizontal space. Con: on hover the...overlaps the title's truncation ellipsis; may need a short gradient fade or explicit right padding on the title when hovered to avoid that.C. Hybrid — always reserve 24px for top-level rows (approach A), but also drop the
pr-3outer padding so the slot sits at the row's right edge. Effectively keeps layout stable without growing the row width further.Manual verification
...menu reachable via keyboard....visible and tappable by default, no hover dependency.<Show when={!props.level}>).Related