Description
When a sidebar item is in the active state and the adjacent item is hovered, the hover background visually merges with the active item's background. This makes the two items appear connected, reducing the visual distinction between the active and hovered states.
Steps to Reproduce
Open the application.
Navigate to a page where a sidebar item is active.
Hover over the menu item immediately above or below the active item.
Observe the background styling.
Expected Behavior
The active and hovered sidebar items should remain visually distinct, with clear separation between their backgrounds.
Actual Behavior
The hover background of the adjacent item visually overlaps or blends with the active item's background, making the two items appear as a single block.
Screenshots

Description
When a sidebar item is in the active state and the adjacent item is hovered, the hover background visually merges with the active item's background. This makes the two items appear connected, reducing the visual distinction between the active and hovered states.
Steps to Reproduce
Open the application.
Navigate to a page where a sidebar item is active.
Hover over the menu item immediately above or below the active item.
Observe the background styling.
Expected Behavior
The active and hovered sidebar items should remain visually distinct, with clear separation between their backgrounds.
Actual Behavior
The hover background of the adjacent item visually overlaps or blends with the active item's background, making the two items appear as a single block.
Screenshots