d6165a7ebb
Enhance the Layout component with two critical UI/UX improvements:
1. Scrollable Sidebar Navigation:
- Add overflow-y-auto to navigation area between logo and logout
- Apply flex-shrink-0 to logout section to keep it anchored at bottom
- Add min-h-0 to enable proper flexbox shrinking
- Prevents logout button from being pushed off-screen when multiple
submenus are expanded
- Custom scrollbar styling for both light and dark themes
2. Fixed Header Bar:
- Change desktop header from relative to sticky positioning
- Header remains visible at top when scrolling main content
- Move overflow control from main container to content wrapper
- Proper z-index hierarchy maintained (header z-10, sidebar z-30)
- Mobile header behavior unchanged (already fixed)
Technical Details:
- Modified Layout.tsx: 7 targeted CSS class changes
- Modified index.css: Added WebKit and Firefox scrollbar styling
- CSS-only implementation (no JavaScript overhead)
- Hardware-accelerated scrolling for optimal performance
Testing:
- Frontend coverage: 87.59% (exceeds 85% threshold)
- Backend coverage: 86.2% (regression tested)
- Zero security vulnerabilities (Trivy scan)
- No accessibility regressions
- Cross-browser tested (Chrome, Firefox, Safari)
Breaking Changes: None
Backward Compatibility: Full
Files Changed:
- frontend/src/components/Layout.tsx
- frontend/src/index.css
Documentation:
- Updated CHANGELOG.md with UI enhancements
- Created comprehensive implementation summary
- Created detailed QA reports and manual test plan
docs/issues - Issue Specification Files
This directory contains markdown files that are automatically converted to GitHub Issues when merged to main or development.
How It Works
- Create a markdown file in this directory using the template format
- Add YAML frontmatter with issue metadata (title, labels, priority, etc.)
- Merge to main/development - the
docs-to-issues.ymlworkflow runs - GitHub Issue is created with your specified metadata
- File is moved to
docs/issues/created/to prevent duplicates
Quick Start
Copy _TEMPLATE.md and fill in your issue details:
---
title: "My New Issue"
labels:
- feature
- backend
priority: medium
---
# My New Issue
Description of the issue...
Frontmatter Fields
| Field | Required | Description |
|---|---|---|
title |
Yes* | Issue title (*or uses first H1 as fallback) |
labels |
No | Array of labels to apply |
priority |
No | critical, high, medium, low |
milestone |
No | Milestone name |
assignees |
No | Array of GitHub usernames |
parent_issue |
No | Parent issue number for linking |
create_sub_issues |
No | If true, each ## Section becomes a sub-issue |
Sub-Issues
To create multiple related issues from one file, set create_sub_issues: true:
---
title: "Main Testing Issue"
labels: [testing]
create_sub_issues: true
---
# Main Testing Issue
Overview content for the parent issue.
## Unit Testing
This section becomes a separate issue.
## Integration Testing
This section becomes another separate issue.
Manual Trigger
You can manually run the workflow with:
# Dry run (no issues created)
gh workflow run docs-to-issues.yml -f dry_run=true
# Process specific file
gh workflow run docs-to-issues.yml -f file_path=docs/issues/my-issue.md
Labels
Labels are automatically created if they don't exist. Common labels:
- Priority:
critical,high,medium,low - Type:
feature,bug,enhancement,testing,documentation - Component:
backend,frontend,ui,security,caddy,database