Skip to content

fix: add transparent border to body for better visibility#1037

Open
tejinderpa wants to merge 1 commit into
Charushi06:mainfrom
tejinderpa:fix/sidebar_scroll
Open

fix: add transparent border to body for better visibility#1037
tejinderpa wants to merge 1 commit into
Charushi06:mainfrom
tejinderpa:fix/sidebar_scroll

Conversation

@tejinderpa
Copy link
Copy Markdown

Related Issue

Closes #1035

Summary

Fixed a UI glitch where the sidebar navigation items flickered and shifted slightly (zig-zagged) when scrolling and hovering, which created a jarring and unstable user experience.

Changes Made

  • Added border: 1px solid transparent to the .badge base CSS class in css/index.css.
  • This pre-allocates the 1px border space required for the .nav-item:hover .badge state, preventing the navigation items from dynamically expanding and shrinking by 2px on hover, which was the root cause of the layout shift.

Testing

  • Opened the application locally and populated the sidebar with items.
  • Scrolled vertically through the sidebar sections while moving the mouse/trackpad over the navigation items.
  • Verified that the hover states apply smoothly without altering item heights, and the jitter/flickering effect is completely gone.

Screenshots

Add screenshots if UI changes exist.

scroll_resolved.mp4

Checklist

  • Code follows project style
  • Tested locally
  • No unrelated changes included
  • Documentation updated (if applicable)

Copilot AI review requested due to automatic review settings June 3, 2026 07:46
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adds a default transparent border to a pill/badge-style element in index.css, likely to normalize styling across states.

Changes:

  • Added border: 1px solid transparent; to the relevant CSS rule in three duplicated sections of the stylesheet.

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

Comment thread css/index.css
color: var(--color-text-secondary);
padding: 2px 8px;
border-radius: 12px;
border: 1px solid transparent;
Comment thread css/index.css
color: var(--color-text-secondary);
padding: 2px 8px;
border-radius: 12px;
border: 1px solid transparent;
Comment thread css/index.css
color: var(--color-text-secondary);
padding: 2px 8px;
border-radius: 12px;
border: 1px solid transparent;
Comment thread css/index.css
color: var(--color-text-secondary);
padding: 2px 8px;
border-radius: 12px;
border: 1px solid transparent;
Comment thread css/index.css
color: var(--color-text-secondary);
padding: 2px 8px;
border-radius: 12px;
border: 1px solid transparent;
Comment thread css/index.css
color: var(--color-text-secondary);
padding: 2px 8px;
border-radius: 12px;
border: 1px solid transparent;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: Sidebar Navigation section flickers

2 participants