Lefthand column in chat UI now scrolls to view overflow

[Daniel-Warner-X]

Small usability fix.

In 1/16 user test, user reported that lefthand column was not scrollable. The data they wanted to see was pushed out of the view and was inaccessible.

Now the column is scrollable...

Screen.Recording.2026-01-21.at.9.35.36.PM.mov

[github-actions]

Claude Code Review

Summary

This PR fixes a usability issue where the left sidebar accordion in the chat UI was not scrollable, preventing users from accessing overflow content. The fix adds overflow handling with a hidden scrollbar for a cleaner UI experience.

Changes:

• Added overflow-y-auto scrollbar-hide classes to the accordion container
• Created new .scrollbar-hide CSS utility class with cross-browser support
• Added .design/ directory to .gitignore

Issues by Severity

🚫 Blocker Issues

None identified.

🔴 Critical Issues

None identified.

🟡 Major Issues

1. Unrelated .gitignore Change

• Location: .gitignore:108-109
• Issue: The .design/ directory addition appears unrelated to the scrolling fix
• Impact: Clutters the PR with unrelated changes, makes git history less clear
• Recommendation: Remove the .design/ addition from this PR or explain its relevance in the PR description. If this is design work related to the scrolling investigation, it should be in a separate commit or PR.

2. Missing Documentation of Design Decision

• Location: CSS utility class creation
• Issue: No comment explaining why scrollbar-hide was chosen over scrollbar-thin
• Context: The codebase already has .scrollbar-thin utility (globals.css:219-261)
• Recommendation: Add a comment explaining the UX decision to hide scrollbars completely rather than using thin scrollbars. This could be accessibility-related or design preference.

🔵 Minor Issues

1. Browser Compatibility Comment Inconsistency

• Location: globals.css:264-269
• Issue: Comment says "WebKit browsers (Chrome, Safari, Edge)" but code includes -ms-overflow-style for IE/old Edge
• Impact: Minor - comment doesn't match implementation
• Fix:

/* Hide scrollbar while maintaining scroll functionality */
.scrollbar-hide {
  /* Firefox */
  scrollbar-width: none;
  /* IE and legacy Edge */
  -ms-overflow-style: none;
}

/* WebKit browsers (Chrome, Safari, modern Edge) */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

2. Consider Accessibility Impact

• Location: Scrollbar hiding implementation
• Issue: Hiding scrollbars can reduce accessibility for users who rely on visual scroll indicators
• Recommendation: Consider:
  • Using scrollbar-thin instead for better UX
  • Adding keyboard navigation hints
  • Testing with screen readers
  • User preference detection (prefers-reduced-motion, etc.)

Positive Highlights

✅ Cross-browser compatibility: Excellent coverage of Firefox, WebKit, and IE/Edge browsers

✅ Minimal change scope: Single-line change to fix the issue - follows the principle of minimal modification

✅ User-driven improvement: Addresses real user feedback from usability testing (1/16 user test)

✅ Proper CSS organization: Added utility class to globals.css following established patterns

✅ Preserves scroll functionality: Hides visual scrollbar but maintains scrolling capability

Recommendations

Priority 1 (Before Merge)

1. Remove or justify .gitignore change - Either remove .design/ entry or explain why it's needed for this fix
2. Add design decision comment - Document why scrollbar-hide vs scrollbar-thin in CSS comments

Priority 2 (Follow-up)

3. Accessibility audit - Test with keyboard navigation and screen readers
4. Consider thin scrollbars - Evaluate if scrollbar-thin would provide better UX while still solving the overflow issue
5. Fix browser comment - Update CSS comment to accurately reflect -ms-overflow-style purpose

Priority 3 (Nice-to-have)

6. User preference detection - Consider respecting prefers-reduced-motion or similar preferences
7. E2E test coverage - Add Cypress test to verify accordion scrolling works

Conclusion

This is a solid, user-focused fix that addresses a real usability issue with minimal code changes. The implementation is technically sound with good cross-browser support.

Recommendation: Approve with minor changes - Remove/explain the .gitignore change and add a CSS comment about the design decision. The accessibility concern is worth considering but not a blocker.

---

Review Standards Applied:

• ✅ Frontend Development Standards (DESIGN_GUIDELINES.md)
• ✅ Code Quality Patterns
• ✅ Browser Compatibility Best Practices
• ✅ Git Hygiene (single concern per PR)

Generated by Claude Code Review | Standards: CLAUDE.md, frontend-development.md

---

🔍 View AI decision process (logs available for 90 days)

📋 View memory system files loaded (click to expand)

What Amber Loaded for Code Review

Amber automatically loaded these repository standards from the memory system:

1. CLAUDE.md - Master project instructions, development standards
2. backend-development.md - Go backend, K8s integration patterns
3. frontend-development.md - NextJS, Shadcn UI, React Query patterns
4. security-standards.md - Auth, RBAC, token handling
5. k8s-client-usage.md - User token vs service account patterns
6. error-handling.md - Consistent error patterns
7. react-query-usage.md - Data fetching patterns

Impact: This review used your repository's specific code quality standards, security patterns, and best practices from the memory system (PRs #359, #360) - not just generic code review guidelines.

[bobbravo2]

Beautiful! Thank you!

[andybraren]

LGTM!