feat(slides): "Scroll for more" hint on overflowing slides#10305
Merged
Conversation
Slide content that overflows the frame is easy to miss in fullscreen, where OS overlay scrollbars are hidden. Add a dismissible affordance that appears when a slide overflows and is scrolled to the top. Co-authored-by: Cursor <cursoragent@cursor.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new “Scroll for more” visual affordance to Reveal.js-based slides when slide content overflows, aiming to prevent hidden below-the-fold content during presentations (especially fullscreen with overlay scrollbars).
Changes:
- Introduces a
SlideScrollContainer+useSlideScrollHinthook to detect overflow/top-of-scroll and render a hint overlay. - Wraps
SubslideViewcontent inSlideScrollContainerto enable the hint in the Reveal deck renderer. - Adds unit/component tests for
shouldShowScrollHintand the container behavior.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| frontend/src/components/slides/slide-scroll-hint.tsx | New scroll container, overflow detection hook, and hint overlay UI. |
| frontend/src/components/slides/reveal-component.tsx | Wraps subslide content in the new scroll container so the hint can appear in slides. |
| frontend/src/components/slides/tests/slide-scroll-hint.test.tsx | Adds tests for the helper + container, including overflow and scroll dismissal behavior. |
- Unobserve removed nodes in the scroll-hint ResizeObserver - Restore stubbed globals between tests to avoid cross-file leakage Co-authored-by: Cursor <cursoragent@cursor.com>
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
All reported issues were addressed
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
Contributor
Coverage Report for ./frontend
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||
Light2Dark
marked this pull request as ready for review
July 24, 2026 05:30
mscolnick
reviewed
Jul 24, 2026
| <div className="h-16 w-full bg-linear-to-t from-background via-background/80 to-transparent" /> | ||
| <div className="absolute bottom-3 flex items-center gap-1 rounded-full border border-border/60 bg-background/90 px-2.5 py-1 text-xs text-muted-foreground shadow-sm backdrop-blur-sm"> | ||
| <ChevronDownIcon className="h-3.5 w-3.5" /> | ||
| <span>Scroll for more</span> |
Contributor
There was a problem hiding this comment.
maybe this could be smaller and more minimal? idk
mscolnick
previously approved these changes
Jul 24, 2026
Reveal.js keeps not-yet-revealed fragments in the layout (space reserved via visibility: hidden), so scrollHeight counted future fragment content and showed "Scroll for more" prematurely. Measure overflow only up to the first unrevealed fragment and re-check on fragment visibility changes. Also keep the observed content wrapper sizing to its content (min-h-full on a block scroll container) so the ResizeObserver reliably fires for late-loading content without changing slide layout. Co-authored-by: Cursor <cursoragent@cursor.com>
Contributor
There was a problem hiding this comment.
All reported issues were addressed across 1 file (changes from recent commits).
Tip: Review your code locally with the cubic CLI to iterate faster.
Re-trigger cubic
mscolnick
approved these changes
Jul 24, 2026
Contributor
|
🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.23.16-dev6 |
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
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.
📝 Summary
Slide content that overflows the slide frame is easy to miss during a presentation, especially in fullscreen where OS overlay scrollbars are hidden. There's no visual cue that more content exists below the fold. Related to #10306
This adds a lightweight, dismissible "Scroll for more" affordance to slides:
background/muted-foreground, verified in light and dark mode).shouldShowScrollHint); the container observes its content wrapper with aResizeObserverso late-loading content (images, charts) still flips the hint on, and a smallMutationObserverre-checks when reveal.js fragments are shown/hidden (which do not change layout). Space reserved by not-yet-revealed fragments is excluded, so the hint reflects only currently revealed content, and coalesces updates viarequestAnimationFrame.SubslideViewin the reveal deck wraps its content in the newSlideScrollContainer. The minimap and other renderers are untouched.🎥 Media
📋 Pre-Review Checklist
✅ Merge Checklist
Made with Cursor