feat: add nightly branch workflow

docs/issues/created/20251221-issue-sidebar-header-ui-manual-test-plan.md

@@ -10,6 +10,7 @@
 ## Overview
 
 This manual test plan focuses on validating the UI/UX improvements for:
+
 1. **Scrollable Sidebar Navigation**: Ensures logout button remains accessible when submenus expand
 2. **Fixed Header Bar**: Keeps header visible when scrolling page content
 
@@ -18,17 +19,20 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ## Test Environment Setup
 
 ### Prerequisites
+
 - [ ] Latest code from `feature/beta-release` branch pulled
 - [ ] Frontend dependencies installed: `cd frontend && npm install`
 - [ ] Development server running: `npm run dev`
 - [ ] Browser DevTools open for console error monitoring
 
 ### Test Browsers
+
 - [ ] Chrome/Edge (Chromium-based)
 - [ ] Firefox
 - [ ] Safari (if available)
 
 ### Test Modes
+
 - [ ] Light theme
 - [ ] Dark theme
 - [ ] Desktop viewport (≥1024px width)
@@ -41,6 +45,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 1.1: Expanded Sidebar with All Submenus Open
 
 **Steps**:
+
 1. Open Charon in browser at desktop resolution (≥1024px)
 2. Ensure sidebar is expanded (click hamburger if collapsed)
 3. Click "Settings" menu item to expand its submenu
@@ -50,6 +55,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 7. Scroll within the sidebar navigation area
 
 **Expected Results**:
+
 - [ ] Sidebar navigation area shows a subtle scrollbar when content overflows
 - [ ] Scrollbar is styled with custom colors matching the theme
 - [ ] Logout button remains visible at the bottom of the sidebar
@@ -59,6 +65,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 - [ ] Smooth scrolling behavior (no jank or stutter)
 
 **Bug Indicators**:
+
 - ❌ Logout button pushed off-screen
 - ❌ Harsh default scrollbar styling
 - ❌ No scrollbar when content overflows
@@ -69,10 +76,12 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 1.2: Collapsed Sidebar State
 
 **Steps**:
+
 1. Click the hamburger menu icon to collapse the sidebar
 2. Observe the compact icon-only sidebar
 
 **Expected Results**:
+
 - [ ] Collapsed sidebar shows only icons
 - [ ] Logout icon remains visible at bottom
 - [ ] No scrollbar needed (all items fit in viewport height)
@@ -80,6 +89,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 - [ ] Smooth transition animation when collapsing
 
 **Bug Indicators**:
+
 - ❌ Logout icon not visible
 - ❌ Jerky collapse animation
 - ❌ Icons overlapping or misaligned
@@ -89,6 +99,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 1.3: Sidebar Scrollbar Interactivity
 
 **Steps**:
+
 1. Expand sidebar with multiple submenus open (repeat Test Case 1.1 steps 2-6)
 2. Hover over the scrollbar
 3. Click and drag the scrollbar thumb
@@ -96,6 +107,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 5. Use keyboard arrow keys to navigate menu items
 
 **Expected Results**:
+
 - [ ] Scrollbar thumb becomes slightly more opaque on hover
 - [ ] Dragging scrollbar thumb scrolls content smoothly
 - [ ] Mouse wheel scrolling works within sidebar
@@ -103,6 +115,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 - [ ] Active menu item scrolls into view when selected via keyboard
 
 **Bug Indicators**:
+
 - ❌ Scrollbar not interactive
 - ❌ Keyboard navigation broken
 - ❌ Scrolling feels laggy or stutters
@@ -112,12 +125,14 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 1.4: Mobile Sidebar Behavior
 
 **Steps**:
+
 1. Resize browser to mobile viewport (<1024px) or use DevTools device emulation
 2. Click hamburger menu to open mobile sidebar overlay
 3. Expand multiple submenus
 4. Scroll within the sidebar
 
 **Expected Results**:
+
 - [ ] Sidebar appears as overlay with backdrop
 - [ ] Navigation area is scrollable if content overflows
 - [ ] Logout button remains at bottom
@@ -125,6 +140,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 - [ ] Closing sidebar (click backdrop or X) works smoothly
 
 **Bug Indicators**:
+
 - ❌ Mobile sidebar not scrollable
 - ❌ Logout button hidden on mobile
 - ❌ Backdrop not dismissing sidebar
@@ -136,12 +152,14 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 2.1: Header Visibility During Content Scroll
 
 **Steps**:
+
 1. Navigate to a page with long content (e.g., Proxy Hosts with many entries)
 2. Scroll down the page content at least 500px
 3. Continue scrolling to bottom of page
 4. Scroll back to top
 
 **Expected Results**:
+
 - [ ] Desktop header bar remains fixed at top of viewport
 - [ ] Header does not scroll with content
 - [ ] Header background and border remain visible
@@ -150,6 +168,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 - [ ] Content scrolls smoothly beneath the header
 
 **Bug Indicators**:
+
 - ❌ Header scrolls off-screen with content
 - ❌ Header jumps or stutters
 - ❌ Buttons in header become unresponsive
@@ -160,6 +179,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 2.2: Header Element Interactivity
 
 **Steps**:
+
 1. With page scrolled down (header should be at top of viewport)
 2. Click the sidebar collapse/expand button in header
 3. Click the notifications icon
@@ -167,6 +187,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 5. Open the user menu dropdown (if present)
 
 **Expected Results**:
+
 - [ ] Sidebar collapse button works correctly
 - [ ] Notifications dropdown opens anchored to header
 - [ ] Theme toggle switches between light/dark mode
@@ -174,6 +195,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 - [ ] All click targets remain accurate (no misalignment)
 
 **Bug Indicators**:
+
 - ❌ Dropdowns appear behind header or content
 - ❌ Buttons not responding to clicks
 - ❌ Dropdowns positioned incorrectly
@@ -183,17 +205,20 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 2.3: Mobile Header Behavior
 
 **Steps**:
+
 1. Resize to mobile viewport (<1024px)
 2. Scroll page content down
 3. Observe mobile header behavior
 
 **Expected Results**:
+
 - [ ] Mobile header remains fixed at top (existing behavior preserved)
 - [ ] No regressions in mobile header functionality
 - [ ] Sidebar toggle button works
 - [ ] Content scrolls beneath mobile header
 
 **Bug Indicators**:
+
 - ❌ Mobile header scrolls away
 - ❌ Mobile header overlaps with content
 - ❌ Hamburger menu not working
@@ -203,6 +228,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 2.4: Header Z-Index Hierarchy
 
 **Steps**:
+
 1. Desktop viewport (≥1024px)
 2. Open the notifications dropdown from header
 3. Observe dropdown positioning relative to header
@@ -210,12 +236,14 @@ This manual test plan focuses on validating the UI/UX improvements for:
 5. Observe sidebar relative to header
 
 **Expected Results**:
+
 - [ ] Sidebar (z-30) appears above header (z-10) ✅
 - [ ] Dropdowns in header appear correctly (not behind content)
 - [ ] No visual overlapping issues
 - [ ] Proper layering: Content < Header < Dropdowns < Sidebar < Modals
 
 **Bug Indicators**:
+
 - ❌ Dropdown hidden behind header
 - ❌ Sidebar hidden behind header
 - ❌ Content appearing above header
@@ -227,12 +255,14 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 3.1: Viewport Resize Behavior
 
 **Steps**:
+
 1. Start at desktop viewport (≥1024px)
 2. Expand sidebar with submenus
 3. Slowly resize browser width from 1400px → 1000px → 768px → 375px
 4. Observe layout transitions at breakpoints
 
 **Expected Results**:
+
 - [ ] Smooth transition at 1024px breakpoint (desktop ↔ mobile)
 - [ ] Sidebar transitions from expanded to overlay mode
 - [ ] Header transitions from desktop to mobile style
@@ -241,6 +271,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 - [ ] Scrolling continues to work in both modes
 
 **Bug Indicators**:
+
 - ❌ Layout breaks at specific widths
 - ❌ Horizontal scrollbar appears
 - ❌ Elements overlap or get cut off
@@ -251,6 +282,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 3.2: Dark/Light Theme Toggle with Scroll State
 
 **Steps**:
+
 1. Expand sidebar with multiple submenus
 2. Scroll sidebar to middle position (logout button out of view above)
 3. Toggle between light and dark themes
@@ -258,6 +290,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 5. Toggle theme again
 
 **Expected Results**:
+
 - [ ] Sidebar scroll position preserved after theme toggle
 - [ ] Scrollbar styling updates to match new theme
 - [ ] Header background color updates correctly
@@ -265,6 +298,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 - [ ] No flashing or visual glitches during theme transition
 
 **Bug Indicators**:
+
 - ❌ Scroll position resets to top
 - ❌ Scrollbar styling not updating
 - ❌ Layout shifts during theme change
@@ -275,6 +309,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 3.3: Browser Zoom Levels
 
 **Steps**:
+
 1. Set browser zoom to 50% (Ctrl/Cmd + Mouse wheel or View menu)
 2. Verify sidebar scrolling and header behavior
 3. Set browser zoom to 100% (default)
@@ -283,6 +318,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 6. Verify functionality
 
 **Expected Results**:
+
 - [ ] Sidebar scrolling works at all zoom levels
 - [ ] Header remains fixed at all zoom levels
 - [ ] No horizontal scrollbars introduced by zoom
@@ -290,6 +326,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 - [ ] Layout remains functional
 
 **Bug Indicators**:
+
 - ❌ Horizontal scrollbars at high zoom
 - ❌ Elements overlap at extreme zoom levels
 - ❌ Scrolling broken at specific zoom
@@ -302,11 +339,13 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 4.1: Chrome/Edge (Chromium)
 
 **Steps**:
+
 1. Run all test suites 1-3 in Chrome or Edge
 2. Open DevTools Console and check for errors
 3. Monitor Performance tab for any issues
 
 **Expected Results**:
+
 - [ ] All features work as expected
 - [ ] No console errors related to layout or scrolling
 - [ ] Smooth 60fps scrolling in Performance tab
@@ -317,17 +356,20 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 4.2: Firefox
 
 **Steps**:
+
 1. Open Charon in Firefox
 2. Run all test suites 1-3
 3. Verify Firefox-specific scrollbar styling (`scrollbar-width: thin`)
 
 **Expected Results**:
+
 - [ ] All features work as expected
 - [ ] Firefox thin scrollbar styling applied
 - [ ] Scrollbar color matches theme (via `scrollbar-color` property)
 - [ ] No layout differences compared to Chrome
 
 **Bug Indicators**:
+
 - ❌ Thick default scrollbar in Firefox
 - ❌ Layout differences from Chrome
 
@@ -336,17 +378,20 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 4.3: Safari (if available)
 
 **Steps**:
+
 1. Open Charon in Safari (macOS)
 2. Run all test suites 1-3
 3. Verify `position: sticky` works correctly
 
 **Expected Results**:
+
 - [ ] Header `position: sticky` works (Safari 13+ supports this)
 - [ ] All features work as expected
 - [ ] WebKit scrollbar styling applied
 - [ ] Smooth scrolling on trackpad
 
 **Bug Indicators**:
+
 - ❌ Header not sticking in Safari
 - ❌ Scrollbar styling not applied
 - ❌ Stuttery scrolling
@@ -358,6 +403,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 5.1: Keyboard Navigation Through Sidebar
 
 **Steps**:
+
 1. Click in browser address bar, then press Tab to enter page
 2. Use Tab key to navigate through sidebar menu items
 3. Expand submenus using Enter or Space keys
@@ -365,6 +411,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 5. Tab to logout button
 
 **Expected Results**:
+
 - [ ] Focus indicator visible on each menu item
 - [ ] Focused items scroll into view automatically
 - [ ] Can reach and activate logout button via keyboard
@@ -372,6 +419,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 - [ ] Focus order is logical (top to bottom)
 
 **Bug Indicators**:
+
 - ❌ Focused items not scrolling into view
 - ❌ Cannot reach logout button via keyboard
 - ❌ Focus indicator not visible
@@ -382,11 +430,13 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 5.2: Screen Reader Testing (Optional)
 
 **Steps**:
+
 1. Enable screen reader (NVDA, JAWS, VoiceOver)
 2. Navigate through sidebar menu
 3. Navigate through header elements
 
 **Expected Results**:
+
 - [ ] Sidebar navigation announced as "navigation" landmark
 - [ ] Menu items announced with proper labels
 - [ ] Current page announced correctly
@@ -400,16 +450,19 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 6.1: Rapid Sidebar Collapse/Expand
 
 **Steps**:
+
 1. Rapidly click sidebar collapse button 10 times
 2. Observe for memory leaks or performance degradation
 
 **Expected Results**:
+
 - [ ] Smooth transitions even with rapid toggling
 - [ ] No memory leaks (check DevTools Memory tab)
 - [ ] No console errors
 - [ ] Animations complete correctly
 
 **Bug Indicators**:
+
 - ❌ Animations stuttering after multiple toggles
 - ❌ Memory usage increasing
 - ❌ Console errors appearing
@@ -419,17 +472,20 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 6.2: Long Page Content Stress Test
 
 **Steps**:
+
 1. Navigate to Proxy Hosts page
 2. If limited data, use browser DevTools to inject 100+ fake host entries into the list
 3. Scroll from top to bottom of the page rapidly
 
 **Expected Results**:
+
 - [ ] Header remains fixed throughout scroll
 - [ ] No layout thrashing or repaints (check DevTools Performance)
 - [ ] Smooth scrolling even with large DOM
 - [ ] No memory leaks
 
 **Bug Indicators**:
+
 - ❌ Stuttering during scroll
 - ❌ Header jumping or flickering
 - ❌ Performance degradation with large lists
@@ -439,6 +495,7 @@ This manual test plan focuses on validating the UI/UX improvements for:
 ### Test Case 6.3: Focus Management After Scroll
 
 **Steps**:
+
 1. Focus an element in header (e.g., notifications button)
 2. Scroll page content down 500px
 3. Click focused element
@@ -447,12 +504,14 @@ This manual test plan focuses on validating the UI/UX improvements for:
 6. Verify button remains visible
 
 **Expected Results**:
+
 - [ ] Focused elements in header remain accessible
 - [ ] Clicking focused elements works correctly
 - [ ] Focused elements in sidebar scroll into view
 - [ ] No focus lost during scrolling
 
 **Bug Indicators**:
+
 - ❌ Focused element not visible after scroll
 - ❌ Click targets misaligned
 - ❌ Focus lost unexpectedly
@@ -461,12 +520,14 @@ This manual test plan focuses on validating the UI/UX improvements for:
 
 ## Known Issues & Expected Behavior
 
-### Not a Bug (Expected):
+### Not a Bug (Expected)
+
 - **Existing Linting Warnings**: 40 pre-existing TypeScript warnings unrelated to this change
 - **Nested Sticky Elements**: Child components using `position: sticky` will be relative to content scroll container, not viewport (documented limitation)
 - **Safari <13**: `position: sticky` not supported in very old Safari versions (not a target)
 
-### Future Enhancements:
+### Future Enhancements
+
 - Smooth scroll to active menu item on page load
 - Header shadow effect when content scrolls beneath
 - Collapse sidebar automatically on mobile after navigation
@@ -499,7 +560,9 @@ If you find a bug during testing, please report it with the following details:
 
 **Console Errors**:
 ```
+
 [Paste any console errors]
+
 ```
 
 **Severity**: [Critical / High / Medium / Low]