Prevent sidebar tool buttons from flashing during collapse#7652
Prevent sidebar tool buttons from flashing during collapse#7652benceruleanlu merged 1 commit intomainfrom
Conversation
dosubot
bot
added
the
size:XS
📝 WalkthroughWalkthroughA utility class Changes
Possibly related PRs
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (11)src/**/*.vue📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{vue,ts}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{composables,components}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/*.{vue,ts,tsx}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{components,composables}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/components/**/*.vue📄 CodeRabbit inference engine (src/components/CLAUDE.md)
Files:
src/components/**/*.{vue,css}📄 CodeRabbit inference engine (src/components/CLAUDE.md)
Files:
src/components/**/*.{vue,ts,js}📄 CodeRabbit inference engine (src/components/CLAUDE.md)
Files:
src/**/*.{js,ts,tsx,vue}📄 CodeRabbit inference engine (AGENTS.md)
Files:
src/**/*.{ts,tsx,vue,js}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (11)📓 Common learnings📚 Learning: 2025-12-18T02:07:38.870ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-12-09T03:49:52.828ZApplied to files:
📚 Learning: 2025-12-09T21:40:12.361ZApplied to files:
📚 Learning: 2025-12-16T22:26:49.463ZApplied to files:
📚 Learning: 2025-12-11T12:25:15.470ZApplied to files:
📚 Learning: 2025-12-18T21:15:46.862ZApplied to files:
📚 Learning: 2025-12-18T16:03:02.066ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
🔇 Additional comments (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/20/2025, 12:22:30 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results⏰ Completed at: 12/20/2025, 12:30:35 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
There was a problem hiding this comment.
Pull request overview
This PR fixes a visual artifact where sidebar tool buttons briefly flash outside their container during the hover-out collapse transition.
- Adds
overflow-hiddento clip tool buttons during width transition from full size tow-0
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.21 MB (baseline 3.21 MB) • 🔴 +16 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 998 kB (baseline 998 kB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 297 kB (baseline 297 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 184 kB (baseline 184 kB) • ⚪ 0 BReusable component library chunks
Status: 8 added / 8 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 1.86 kB (baseline 1.86 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.46 MB (baseline 8.46 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.44 MB (baseline 3.44 MB) • ⚪ 0 BBundles that do not match a named category
Status: 20 added / 20 removed |
christian-byrne
added
needs-backport
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
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
|
@benceruleanlu Successfully backported to #7654 |
|
@benceruleanlu Successfully backported to #7655 |
github-actions
bot
removed
the
needs-backport
…g collapse (#7654) Backport of #7652 to `core/1.35` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7654-backport-core-1-35-Prevent-sidebar-tool-buttons-from-flashing-during-collapse-2cf6d73d365081b7aa45d585e14e6b69) by [Unito](https://www.unito.io) Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com>
…ng collapse (#7655) Backport of #7652 to `cloud/1.35` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7655-backport-cloud-1-35-Prevent-sidebar-tool-buttons-from-flashing-during-collapse-2cf6d73d36508140907de9ba84a4b88e) by [Unito](https://www.unito.io) Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com>
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
4 participants
Prevent sidebar tool buttons from flashing during collapse.
What changed
Why
w-0while the tabs keep their intrinsic width, causing a brief clipped flash on the right edge of the sidebar.Evidence
Recording.2025-12-19.162337.mp4
References