fix(toast): refine stacked hover and focus styles

[lyzno1]

Summary

• replace the stacked toast hover bridge DOM node with a CSS pseudo-element to match the official Base UI pattern
• keep the symmetric stacked toast alignment while simplifying the API
• align toast root focus treatment with the card radius using an explicit ring instead of relying on the browser default outline

Testing

• pnpm test -- app/components/base/ui/toast/tests/index.spec.tsx

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request refines the visual presentation and accessibility of stacked toast components. It modernizes the hover bridge implementation using CSS pseudo-elements, simplifies the component's API, and enhances focus visibility with custom ring styles, ensuring a more consistent and accessible user experience.

Highlights

• Hover Bridge Implementation: Replaced the DOM-based hover bridge for stacked toasts with a CSS pseudo-element, aligning with the official Base UI pattern.
• API Simplification: Simplified the API by removing the showHoverBridge prop, while maintaining symmetric stacked toast alignment.
• Focus Styles: Aligned the toast root's focus treatment with the card radius by implementing an explicit ring, moving away from reliance on default browser outlines.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[Copilot]

Pull request overview

This PR refines the stacked toast interaction styling to better match the Base UI pattern, including replacing the hover “bridge” element with a CSS pseudo-element and updating focus-visible styling to use an explicit ring aligned with the toast/card radius.

Changes:

• Replace the stacked toast “hover bridge” DOM node with an ::after pseudo-element hit-area.
• Simplify ToastCard/ToastViewport by removing the showHoverBridge prop and index-based mapping.
• Update toast root focus-visible styling to use an explicit ring and rounded radius.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[gemini-code-assist]

Code Review

This pull request effectively refactors the stacked toast component by replacing the hover bridge DOM node with a more efficient CSS pseudo-element and improving focus styles. The API is also simplified by removing the showHoverBridge prop. I've added one suggestion to refine the new hover bridge behavior to more closely match the previous implementation by hiding it on the last toast in the stack. Overall, these are solid improvements to the component's maintainability and accessibility.