Prevent workspace action from expanding issue list rows #3092
Service Desk opened 1 day ago

Follow-up to issue #3086 based on the agreed design.

Scope

  • In the issues list, place the workspaces button immediately after the State field.
  • If State is hidden through Fields & Links, place the button at the start of the fields row.
  • Keep the button hover-only and reserve its space so revealing it does not move fields or increase the row height.
  • Do not change the pin button.
  • Apply this change only to the issues list; leave the pull request list unchanged.

Acceptance criteria

  • Hovering an issue row never increases its height when the workspaces button appears.
  • The workspaces button is next to State when State is visible, and at the start of the fields row otherwise.
  • Existing pin-button and pull-request-list behavior remains unchanged.
  • Service Desk commented 1 day ago

    @zaakiy, this follow-up captures the design agreed in issue #3086. No response is needed; this mention carries your watch over to the implementation issue.

  • Service Desk commented 9 hours ago

    Rationale from issue #3086: the workspaces action currently appears on hover inside the wrapping title row. When a title already fills that row, revealing the action can push it onto a new line and increase the issue row's height, creating a jarring layout shift while scanning the list.

    Moving the action into the existing fields row beside State gives it a predictable, easy-to-scan landmark without adding another row. Reserving its space prevents either the fields or row height from moving when it appears, while keeping it hover-only preserves the list's low visual noise. The start-of-fields fallback provides the same stable behavior when State is hidden.

  • Zak Siddiqui commented 9 hours ago

    @servicedesk please create an ASCII text representation without hover and with hover as it is currently, and without hover and with hover for the proposed.

  • Service Desk commented 9 hours ago

    @zaakiy, here is a schematic comparison. W is the workspaces button, and ··· is its reserved (but visually empty) space. The pin button is omitted to isolate this change; it remains in its current position and behaves exactly as it does today.

    Current

    Without hover:

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

    With hover, the workspaces button is inserted after the title. When the title has already filled the available width, the button wraps and makes the issue row taller:

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

    Proposed

    Without hover, space for the button is already reserved immediately after State:

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

    With hover, the button occupies that reserved space, so neither the fields nor the row height move:

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

    If State is hidden, the reserved slot and button move to the start of the fields row:

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

    Does this match the behavior you expect?

  • Zak Siddiqui commented 9 hours ago

    yes!

    @robin, over to you for either approval, or for a better UX suggestion.

    Whatever the case, the current UX is jarring.

  • Zak Siddiqui commented 9 hours ago

    @servicedesk apologies, the pin icon also needs to be on the label row next to the workspace icon. Otherwise, this problem will not have been solved.

  • Service Desk commented 9 hours ago

    @zaakiy, agreed: the pin action also needs to move into the fields/label row beside the workspace action, with space reserved for both hover-only actions. Otherwise the pin can still wrap from the title row and cause the same height shift.

    @robin, I could not implement this because the assignee account does not have write-code permission in onedev/server; tod issue checkout --for-write 3092 returned HTTP 403. Please take over the code change with this clarification.

  • Zak Siddiqui commented 9 hours ago

    @servicedesk note that this issue has been polluted due to my lack of awareness about the pin icon, which has since been rectified. I wonder if it would be cleaner to create a new issue altogether. Ensure that the new issue has:

    • Justification and motivation
    • What we want done and why we are doing it
    • The ASCII text of the before and after for both the workspace icon and the pin icon, which only appear on hover
  • Service Desk commented 9 hours ago

    @zaakiy, I created issue #3095 with the corrected scope: it explains the motivation, specifies moving both hover-only workspace and pin actions with reserved space, and includes before/after ASCII diagrams for both visible and hidden State cases. All watchers from this issue were carried over, and the replacement is assigned to @robin. This issue is now superseded by #3095.

  • Service Desk changed state to 'Closed' 9 hours ago
    Previous Value Current Value
    Open
    Closed
1/1
Type
Improvement
Priority
Normal
Assignee
Labels
No labels
Issue Votes (0)
Watchers (3)
Reference
OD-3092
Please wait...
Connection lost or session expired, reload to recover
Page is in error, reload to recover