Fix card drag handle layout shift on hover

[Chris0Jeky]

Summary

• Replace width: 0; overflow: hidden with visibility: hidden; opacity: 0 on the drag label so it reserves its horizontal space and eliminates layout shift on hover
• Remove negative margins (-0.5rem) on the card action bar that caused visual jump when the bar appeared
• All existing CardItem unit tests pass (1444 total)

Closes #621

Test plan

• Hover over a board card and verify the drag handle area does not shift/jump
• Verify "Drag card" label fades in smoothly on drag handle hover without changing card width
• Verify drag-and-drop still works correctly
• Verify card action bar (drag handle + move button) is visually stable across hover/idle states

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[Chris0Jeky]

Self-review

Changes reviewed:

1. Drag label: width:0/overflow:hidden -> visibility:hidden/opacity:0 -- Correct fix. The label now reserves its space in the flex layout at all times, so hovering only changes visibility/opacity without reflowing. The transition: opacity var(--td-transition-fast) on .td-board-card__drag-label (line 387) still applies, so the fade-in animation is preserved.

2. Action bar: negative margins removed -- The old margin: -0.5rem -0.5rem var(--td-space-2) -0.5rem pulled the action bar outside the card padding, which could cause visual shift when combined with hover state changes. Now uses only margin-bottom for spacing. This does change the visual positioning slightly -- the action bar buttons will no longer extend into the card padding area. This is intentional: it trades a minor spacing change for stable layout.

Potential concerns:

• The drag label now always takes up horizontal space (even when invisible). For narrow columns this adds ~60px of reserved width inside the drag handle button. Since the handle uses flex-1 and the label text is small ("Drag card"), this should be fine in practice but worth verifying visually on narrow boards.
• Removing negative margins shifts the action bar inward by 0.5rem on each side. The card padding (var(--td-space-4) = 1rem) is generous enough that this should look natural.

Verdict: Changes are correct, minimal, and targeted. All unit tests pass. No functional regressions expected -- drag handle still works via the data-action="drag-card-handle" attribute which is unchanged.

[gemini-code-assist]

Code Review

This pull request refactors the CardItem.vue component to simplify margin styling and prevent layout shifts by using visibility and opacity for the drag label instead of width manipulation. A review comment suggests improving accessibility by ensuring the label is also displayed when the drag handle receives keyboard focus via the :focus-visible pseudo-class.

[gemini-code-assist]

For better accessibility, the 'Drag card' label should also appear when the drag handle button receives keyboard focus, not just on hover. You can achieve this by adding a :focus-visible state to the selector. This will improve the experience for keyboard-only users and is consistent with the use of :focus-visible for focus styling elsewhere in the project.

.td-card-drag-handle:hover .td-board-card__drag-label--hidden,
.td-card-drag-handle:focus-visible .td-board-card__drag-label--hidden {
  visibility: visible;
  opacity: 1;
}