Fix overlapping hover and active backgrounds in sidebar items

[tusharmotwani1718]

Summary

This PR fixes a visual issue in the sidebar where the hover background of a menu item visually overlaps with the adjacent active item.

Changes

• Improved separation between active and hovered sidebar items.
• Updated the sidebar styles to keep hover and active states visually distinct.

Closes #80

Testing

• Verified hover behavior on items adjacent to the active item.
• Confirmed the active state remains unchanged.
• Checked the sidebar across different pages.

Greptile Summary

This PR adds a single Tailwind utility class (my-0.5) to the sidebar nav item class string to introduce a 2px vertical gap between items, preventing the hover background of one item from visually touching the active background of an adjacent item.

• The one-character change targets navItemClass, which is used by both SidebarNavLink and the account menu button in SidebarFooter, so all sidebar items gain consistent spacing.
• The active-item left-bar indicator (absolute left-0 top-1 bottom-1) is positioned relative to the element's own box and is unaffected by the outer margin.

Confidence Score: 5/5

A minimal, targeted one-class addition with no logic or data changes — safe to merge.

The only change is appending my-0.5 to a Tailwind class string. It correctly applies to both nav links and the account button (which reuses navItemClass), and does not affect the absolute-positioned active indicator. No backend, auth, billing, or query logic is touched.

No files require special attention.

Important Files Changed

Filename	Overview
src/client/components/Sidebar.tsx	Adds my-0.5 Tailwind margin to navItemClass so adjacent sidebar items have a 2px gap that prevents hover and active backgrounds from visually blending together.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Sidebar renders nav groups] --> B[SidebarNavLink per item]
    B --> C{Is item active?}
    C -- Yes --> D["Apply navItemClass + navItemActiveProps\n(bg-base-300/50, font-medium)"]
    C -- No --> E["Apply navItemClass only\n(hover:bg-base-300/50)"]
    D --> F["Render left accent bar\n(absolute, top-1 bottom-1)"]
    E --> G["No accent bar"]
    F --> H["my-0.5 gap separates items\nso hover bg doesn't touch active bg"]
    G --> H

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[Sidebar renders nav groups] --> B[SidebarNavLink per item]
    B --> C{Is item active?}
    C -- Yes --> D["Apply navItemClass + navItemActiveProps\n(bg-base-300/50, font-medium)"]
    C -- No --> E["Apply navItemClass only\n(hover:bg-base-300/50)"]
    D --> F["Render left accent bar\n(absolute, top-1 bottom-1)"]
    E --> G["No accent bar"]
    F --> H["my-0.5 gap separates items\nso hover bg doesn't touch active bg"]
    G --> H

Loading

_{Reviews (1): Last reviewed commit: "fix: fix sidebar hover-active overlap bu..." | Re-trigger Greptile}