To address the issue of the horizontal line appearing at the bottom of tabs on the Paste website and the Notification Center UI at various browser zoom levels, you can make specific adjustments to the CSS properties related to the bottom border of the tabs. Here's a focused approach to resolve the problem:

1. Adjust CSS for Selected and Hover States: Modify the borderBottomColor property in the _selected and _hover states of the tabs to transparent. This change aims to eliminate the unwanted horizontal line by ensuring the bottom border blends with the tab background or becomes invisible.

_selected: {
  borderBottomColor: "transparent", // Set to transparent to remove the line
  // Other properties remain unchanged
},
_hover: {
  borderBottomColor: "transparent", // Ensure consistency on hover
  // Other properties remain unchanged
},

2. Review boxShadow Property: Ensure that the boxShadow property in the _selected state does not create a visual line at the bottom of the tab. Adjust if necessary to avoid any visual artifacts.

3. Testing and Validation: After implementing these changes, it's crucial to test the tabs across different zoom levels and in various themes (if applicable) to ensure visual consistency and that the issue is resolved.

4. Visual Regression Testing (VRT): Utilize VRT tools like Chromatic for component snapshots and Percy for documentation site testing to ensure that your changes do not introduce any unintended visual regressions across the system.

By focusing on these targeted adjustments and thoroughly testing the changes, you can effectively resolve the visual issue with the tabs at different browser zoom levels.

To continue the conversation, mention @dosu.

Thanks for catching this, @pamelahu ! I've added it to our backlog.