FAC-WEB feat: sticky faculty context header on analysis page (#145)#146
Merged
Conversation
* feat: add sticky faculty context header on analysis page Shows a compact frosted-glass bar (avatar + name + course selector + export button) that fades in when the faculty name scrolls out of view, giving the user persistent context about which faculty they are reviewing. Uses IntersectionObserver on the title <h1> to toggle visibility, following the existing sticky pattern from questionnaire-form-progress. https://claude.ai/code/session_017VN26i97mc9APZ11xfyNm2 * fix: use callback ref so sticky header observer attaches after data loads The previous useEffect with [] ran during the loading state when the h1 hadn't mounted yet, so titleRef.current was null and the IntersectionObserver was never set up. Switching to a callback ref ensures the observer is created the moment the faculty name element actually enters the DOM. https://claude.ai/code/session_017VN26i97mc9APZ11xfyNm2 * refactor: simplify sticky faculty header to pure Tailwind Replace the IntersectionObserver + callback ref + separate component approach with a single sticky Tailwind row on the existing title div. No JS, no state, no extra file — just sticky/backdrop-blur classes on the header that already contains the avatar, name, and controls. https://claude.ai/code/session_017VN26i97mc9APZ11xfyNm2 * fix: swap overflow-x-hidden for overflow-x-clip so sticky header works overflow: hidden (even on one axis) creates a scroll container in CSS, which traps position: sticky — making it stick relative to the section instead of the viewport. overflow-x: clip clips visually without creating a scroll container, so sticky now works against the real scroller. https://claude.ai/code/session_017VN26i97mc9APZ11xfyNm2 --------- Co-authored-by: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Shows a compact frosted-glass bar (avatar + name + course selector + export button) that fades in when the faculty name scrolls out of view, giving the user persistent context about which faculty they are reviewing.
Uses IntersectionObserver on the title to toggle visibility, following the existing sticky pattern from questionnaire-form-progress.
https://claude.ai/code/session_017VN26i97mc9APZ11xfyNm2
The previous useEffect with [] ran during the loading state when the h1 hadn't mounted yet, so titleRef.current was null and the IntersectionObserver was never set up. Switching to a callback ref ensures the observer is created the moment the faculty name element actually enters the DOM.
https://claude.ai/code/session_017VN26i97mc9APZ11xfyNm2
Replace the IntersectionObserver + callback ref + separate component approach with a single sticky Tailwind row on the existing title div. No JS, no state, no extra file — just sticky/backdrop-blur classes on the header that already contains the avatar, name, and controls.
https://claude.ai/code/session_017VN26i97mc9APZ11xfyNm2
overflow: hidden (even on one axis) creates a scroll container in CSS, which traps position: sticky — making it stick relative to the section instead of the viewport. overflow-x: clip clips visually without creating a scroll container, so sticky now works against the real scroller.
https://claude.ai/code/session_017VN26i97mc9APZ11xfyNm2