Skip to content

#206 <Feat>: Implement sticky header functionality #574

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

#206 <Feat>: Implement sticky header functionality #574

wants to merge 3 commits into from

Conversation

konard
Copy link
Contributor

@konard konard commented Sep 10, 2025 •
edited
Loading

Summary

  • Implemented sticky header functionality for all panels in the GPTutor application
  • Headers now remain visible at the top of the screen when users scroll through content
  • Works consistently across all panels including Home, Chat, and other interfaces

Changes Made

  • AppPanelHeader: Added position: sticky, top: 0, and z-index: 100 to make headers stick to the top
  • AppContainer: Updated header wrapper to include proper z-index positioning for layering
  • TabBar: Added z-index: 50 to ensure proper layering below sticky headers
  • Used CSS custom properties for background to maintain theme compatibility (dark/light mode)

Technical Details

  • Headers use position: sticky with top: 0 to stick to the viewport top
  • Z-index hierarchy: Headers (100) > TabBar (50) to prevent overlap issues
  • Background uses var(--vkui--color_background_content) for proper theming
  • Implementation works across all platforms (VK apps, desktop web)

Test Plan

  • Verify sticky headers work in Home panel with long content
  • Test Chat panels maintain sticky header during message scrolling
  • Confirm proper z-index layering with tabbar and other UI elements
  • Validate theme compatibility in both light and dark modes
  • Check responsive behavior across different screen sizes

🤖 Generated with Claude Code

Resolves #206

@konard
Initial commit with task details for issue #206
3a14f45 
Adding CLAUDE.md with task information for AI processing.
This file will be removed when the task is complete.

Issue: #206
@konard konard self-assigned this Sep 10, 2025
konard and others added 2 commits September 10, 2025 20:19
@konard
Remove CLAUDE.md - PR created successfully
afdf164
@konard @claude
#206 <Feat>: Implement sticky header functionality
a6da853 
- Modified AppPanelHeader component to use position: sticky with z-index: 100
- Updated AppContainer to properly handle sticky headers with correct positioning
- Added z-index: 50 to tabBar to ensure proper layering
- Headers now remain visible when scrolling through content in all panels
- Works consistently across Home, Chat, and all other panels using AppPanelHeader

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@konard konard changed the title [WIP] Sticky header #206 <Feat>: Implement sticky header functionality Sep 10, 2025
@konard konard marked this pull request as ready for review September 10, 2025 17:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@konard konard

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Sticky header

1 participant

@konard