Prevent sidebar tool buttons from flashing during collapse (#7652)

Prevent sidebar tool buttons from flashing during collapse.

## What changed
- Clip the sidebar tool-buttons container during hover collapse so tab
labels don't render outside the header.
- Keep the existing width/opacity transition so the title still reclaims
space.

## Why
- Motivation: the hover-out transition shrinks the tool-buttons wrapper
to `w-0` while the tabs keep their intrinsic width, causing a brief
clipped flash on the right edge of the sidebar.
- Why this approach: clipping during the transition is the smallest
change that fixes the visual artifact without altering layout timing or
hover behavior.
- Tradeoffs / limitations: no functional change; the buttons are only
clipped while collapsing.

## Evidence
- Issues: n/a
- Tests: Not run (lint/typecheck only; not evidence)
- Screenshots/video:


https://github.com/user-attachments/assets/3af4d735-6330-4521-b4cf-45eb4b09f9ba

## References
- Related PRs: n/a
This commit is contained in:
Benjamin Lu
2025-12-19 16:55:03 -08:00
committed by GitHub
parent 08faa69256
commit c0c284977d

View File

@@ -15,7 +15,7 @@
</template>
<template #end>
<div
class="touch:w-auto touch:opacity-100 flex flex-row transition-all duration-200 motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100"
class="touch:w-auto touch:opacity-100 flex flex-row overflow-hidden transition-all duration-200 motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100"
>
<slot name="tool-buttons" />
</div>