Prevent hover actions from expanding issue list rows #3095
Service Desk opened 8 hours ago

Follow-up to issue #3092, replacing its superseded scope after identifying that both hover-only actions can cause the same layout shift.

Justification and motivation

The workspace and pin actions currently appear on hover in the wrapping title row. When a title already fills the available width, revealing either action can push the actions onto another line and increase the issue row height. This produces a jarring layout shift while scanning the issues list.

Moving both actions into the existing fields/label row gives them a predictable location. Reserving their space keeps fields and row height stable when hover reveals them, while retaining hover-only visibility keeps visual noise low.

What we want done

  • In the issues list only, move both the workspace action (W) and pin action (P) from the title row to the fields/label row.
  • Place both actions immediately after State when State is visible.
  • When State is hidden through Fields & Links, place both actions at the start of the fields row.
  • Keep both actions hover-only, but always reserve space for them so revealing them moves neither fields nor row height.
  • Leave pull request list behavior unchanged.

Before

Without hover, neither action is visible:

┌──────────────────────────────────────────────────────────┐
│ #3092  A long issue title that fills the title row       │
│ [Open]  [Normal]  [Assignee: servicedesk]                │
└──────────────────────────────────────────────────────────┘

With hover, both actions are inserted after the title. When the title fills the row, they wrap and make the issue row taller:

┌──────────────────────────────────────────────────────────┐
│ #3092  A long issue title that fills the title row       │
│ [W] [P]                                                  │
│ [Open]  [Normal]  [Assignee: servicedesk]                │
└──────────────────────────────────────────────────────────┘

After

Without hover, space for both actions is reserved immediately after State:

┌──────────────────────────────────────────────────────────┐
│ #3092  A long issue title that fills the title row       │
│ [Open]  ··· ···  [Normal]  [Assignee: servicedesk]       │
└──────────────────────────────────────────────────────────┘

With hover, both actions occupy their reserved slots, so neither the fields nor the row height moves:

┌──────────────────────────────────────────────────────────┐
│ #3092  A long issue title that fills the title row       │
│ [Open]  [W] [P]  [Normal]  [Assignee: servicedesk]       │
└──────────────────────────────────────────────────────────┘

If State is hidden, both reserved slots and actions move to the start of the fields row:

no hover: │ ··· ···  [Normal]  [Assignee: servicedesk]     │
hover:    │ [W] [P]  [Normal]  [Assignee: servicedesk]     │

Acceptance criteria

  • Hovering an issue row never increases its height when either action appears.
  • Both actions are next to State when State is visible and at the start of the fields row otherwise.
  • Both actions remain hover-only, with their space reserved before hover.
  • Pull request list behavior remains unchanged.

Watchers carried over from issue #3092: @robin, @zaakiy, @servicedesk.

  • Zak Siddiqui commented 8 hours ago

    Instead of just making the hidden elements visible upon hover, please also slide it in from the left upon hover and then slide it out to the left upon unhover.

  • Service Desk commented 8 hours ago

    @zaakiy, agreed. Both the workspace and pin actions should slide in from the left on row hover and slide back out to the left on unhover. The animation should occur within their fixed, permanently reserved slots so it does not move the surrounding fields or change the row height. @robin, please include this in the implementation of #3095.

  • Zak Siddiqui commented 3 hours ago

    Regarding this ASCII diagram in the description...

    no hover: │ ··· ···  [Normal]  [Assignee: servicedesk]     │
    hover:    │ [W] [P]  [Normal]  [Assignee: servicedesk]     │
    

    The ··· ··· does not take up any space.

    It would be more accurate to be the following

    no hover: │ [Normal]  [Assignee: servicedesk]              │
    hover:    │ [W] [P]  [Normal]  [Assignee: servicedesk]     │
    
  • Service Desk commented 3 hours ago

    @zaakiy The ··· ··· is schematic: it represents the blank width permanently reserved for the two actions, not visible dots in the UI. If [Normal] starts at the beginning of the row when not hovered, it would shift right when [W] [P] slides in, contrary to the requirement that surrounding fields do not move. A more literal no-hover diagram would show blank padding before [Normal].

1/1
Type
Improvement
Priority
Normal
Assignee
Labels
No labels
Issue Votes (0)
Watchers (3)
Reference
OD-3095
Please wait...
Connection lost or session expired, reload to recover
Page is in error, reload to recover