feat: add interactive reveal button for code overlay and improve UI responsiveness #261

jumski · 2025-10-16T14:42:22Z

Implemented a button to toggle display of lengthy code snippets with smooth animations
Added styles for overlay, button, and responsive behavior, including reduced motion support
Enhanced user experience by hiding scroll indicator when overlay is active
Updated event handling to manage overlay visibility and animations effectively
Included media queries for mobile and reduced motion preferences
Minor code adjustments for better maintainability and visual consistency

changeset-bot · 2025-10-16T14:42:25Z

⚠️ No Changeset found

Latest commit: 4c0d969

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

jumski · 2025-10-16T14:42:46Z

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

merge:queue - adds this PR to the back of the merge queue
hotfix:queue - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has enabled the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

nx-cloud · 2025-10-16T14:43:07Z

View your CI Pipeline Execution ↗ for commit 4c0d969

Command	Status	Duration	Result
`nx test:types:health dsl`	✅ Succeeded	15s	View ↗

☁️ Nx Cloud last updated this comment at 2025-10-18 09:50:47 UTC

graphite-app · 2025-10-16T19:11:50Z

pkgs/website/src/content/docs/index.mdx

+          const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+          // 1. Fade out overlay and start scrolling immediately
+          overlay.style.opacity = '0';
+          scrollable.classList.add('scrollable-enabled');
+
+          // Start scroll animation while overlay fades
+          const scrollPromise = smoothScroll(scrollable, scrollable.scrollHeight, 2500);


The prefersReducedMotion check is correctly positioned before animation starts, but the code still initiates smoothScroll regardless of preference. Consider restructuring to avoid creating the animation promise entirely when reduced motion is preferred:

// Check if user prefers reduced motion const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; // 1. Fade out overlay and enable scrolling overlay.style.opacity = '0'; scrollable.classList.add('scrollable-enabled'); // Handle different animation paths based on motion preference if (prefersReducedMotion) { // Skip animation entirely for reduced motion await wait(300); overlay.classList.add('hidden'); // Show buttons immediately showControlButtons(); } else { // Start scroll animation while overlay fades const scrollPromise = smoothScroll(scrollable, scrollable.scrollHeight, 2500); await wait(300); overlay.classList.add('hidden'); await scrollPromise; showControlButtons(); }

This approach respects user preferences more completely by avoiding unnecessary animation setup.

Suggested change

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// 1. Fade out overlay and start scrolling immediately

overlay.style.opacity = '0';

scrollable.classList.add('scrollable-enabled');

// Start scroll animation while overlay fades

const scrollPromise = smoothScroll(scrollable, scrollable.scrollHeight, 2500);

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// 1. Fade out overlay and enable scrolling

overlay.style.opacity = '0';

scrollable.classList.add('scrollable-enabled');

// Handle different animation paths based on motion preference

if (prefersReducedMotion) {

// Skip animation entirely for reduced motion

await wait(300);

overlay.classList.add('hidden');

// Show buttons immediately

showControlButtons();

} else {

// Start scroll animation while overlay fades

const scrollPromise = smoothScroll(scrollable, scrollable.scrollHeight, 2500);

await wait(300);

overlay.classList.add('hidden');

await scrollPromise;

showControlButtons();

}

Spotted by Graphite Agent

Is this helpful? React 👍 or 👎 to let us know.

graphite-app · 2025-10-17T11:29:21Z

pkgs/website/src/components/CodeOverlay.astro

+    .reset-overlay-button {
+      display: none !important;
+    }
+
+    .scroll-top-button {
+      display: none !important;
+    }


The CSS selectors for .reset-overlay-button and .scroll-top-button in the mobile media query are missing the :global() wrapper that's used consistently elsewhere in the file. Without this wrapper, these styles won't correctly target the elements in the Astro component.

For consistency and to ensure proper styling in mobile view, these selectors should be updated to:

:global(.reset-overlay-button) { display: none !important; } :global(.scroll-top-button) { display: none !important; }

This matches the pattern used for these same elements in other parts of the stylesheet.

Suggested change

.reset-overlay-button {

display: none !important;

}

.scroll-top-button {

display: none !important;

}

:global(.reset-overlay-button) {

display: none !important;

}

:global(.scroll-top-button) {

display: none !important;

}

Spotted by Graphite Agent

Is this helpful? React 👍 or 👎 to let us know.

…esponsiveness - Implemented a button to toggle display of lengthy code snippets with smooth animations - Added styles for overlay, button, and responsive behavior, including reduced motion support - Enhanced user experience by hiding scroll indicator when overlay is active - Updated event handling to manage overlay visibility and animations effectively - Included media queries for mobile and reduced motion preferences - Minor code adjustments for better maintainability and visual consistency

github-actions · 2025-10-18T09:51:22Z

🔍 Preview Deployment: Website

✅ Deployment successful!

🔗 Preview URL: https://pr-261.pgflow.pages.dev

📝 Details:

Branch: docs-landing-simplify
Commit: afb1d5956191694507696dd43fd9861b465cc0f4
View Logs

_Last updated: _

github-actions · 2025-10-18T09:52:29Z

🔍 Preview Deployment: Playground

✅ Deployment successful!

🔗 Preview URL: https://pr-261--pgflow-demo.netlify.app

📝 Details:

Branch: docs-landing-simplify
Commit: afb1d5956191694507696dd43fd9861b465cc0f4
View Logs

_Last updated: _

graphite-app · 2025-10-18T22:12:21Z

Merge activity

Oct 18, 10:12 PM UTC: jumski added this pull request to the Graphite merge queue.
Oct 18, 10:12 PM UTC: CI is running for this pull request on a draft pull request (#265) due to your merge queue CI optimization settings.
Oct 18, 10:13 PM UTC: Merged by the Graphite merge queue via draft PR: #265.

…esponsiveness (#261) - Implemented a button to toggle display of lengthy code snippets with smooth animations - Added styles for overlay, button, and responsive behavior, including reduced motion support - Enhanced user experience by hiding scroll indicator when overlay is active - Updated event handling to manage overlay visibility and animations effectively - Included media queries for mobile and reduced motion preferences - Minor code adjustments for better maintainability and visual consistency

jumski marked this pull request as ready for review October 16, 2025 14:42

jumski mentioned this pull request Oct 16, 2025

docs: final tweaks for docs #260

Closed

jumski temporarily deployed to preview October 16, 2025 14:43 — with GitHub Actions Inactive

jumski force-pushed the docs-landing-simplify branch from c849765 to 425ae84 Compare October 16, 2025 15:49

jumski had a problem deploying to preview October 16, 2025 15:50 — with GitHub Actions Error

jumski force-pushed the docs-landing-simplify branch from 425ae84 to 738c8b2 Compare October 16, 2025 15:50

jumski temporarily deployed to preview October 16, 2025 15:52 — with GitHub Actions Inactive

jumski force-pushed the docs-landing-simplify branch from 738c8b2 to 18f7a6d Compare October 16, 2025 19:09

jumski temporarily deployed to preview October 16, 2025 19:11 — with GitHub Actions Inactive

graphite-app bot reviewed Oct 16, 2025

View reviewed changes

jumski force-pushed the docs-landing-simplify branch from 18f7a6d to f5ce922 Compare October 17, 2025 09:29

jumski temporarily deployed to preview October 17, 2025 09:30 — with GitHub Actions Inactive

jumski force-pushed the docs-landing-simplify branch from f5ce922 to 68c89d1 Compare October 17, 2025 11:27

jumski temporarily deployed to preview October 17, 2025 11:28 — with GitHub Actions Inactive

graphite-app bot reviewed Oct 17, 2025

View reviewed changes

jumski force-pushed the docs-final-tweaks branch from 18ec9ab to 450c4f1 Compare October 17, 2025 15:02

jumski force-pushed the docs-landing-simplify branch from 68c89d1 to 0ea7402 Compare October 17, 2025 15:02

jumski temporarily deployed to preview October 17, 2025 15:03 — with GitHub Actions Inactive

jumski temporarily deployed to preview October 17, 2025 15:04 — with GitHub Actions Inactive

jumski force-pushed the docs-landing-simplify branch from 0ea7402 to 4c0d969 Compare October 18, 2025 09:48

jumski mentioned this pull request Oct 18, 2025

chore: update and reorganize redirects for historical, main branch, and concept paths #262

Closed

jumski temporarily deployed to preview October 18, 2025 09:50 — with GitHub Actions Inactive

This was referenced Oct 18, 2025

chore: add missing sections #263

Closed

feat(website): add starlight-contextual-menu integration and update dependencies #264

Closed

graphite-app bot closed this Oct 18, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add interactive reveal button for code overlay and improve UI responsiveness #261

feat: add interactive reveal button for code overlay and improve UI responsiveness #261

Uh oh!

jumski commented Oct 16, 2025

Uh oh!

changeset-bot bot commented Oct 16, 2025 •

edited

Loading

Uh oh!

jumski commented Oct 16, 2025 •

edited

Loading

Uh oh!

nx-cloud bot commented Oct 16, 2025 •

edited

Loading

Uh oh!

graphite-app bot Oct 16, 2025

Uh oh!

graphite-app bot Oct 17, 2025

Uh oh!

github-actions bot commented Oct 18, 2025

Uh oh!

github-actions bot commented Oct 18, 2025

Uh oh!

graphite-app bot commented Oct 18, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-          const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-          // 1. Fade out overlay and start scrolling immediately
-          overlay.style.opacity = '0';
-          scrollable.classList.add('scrollable-enabled');
-          // Start scroll animation while overlay fades
-          const scrollPromise = smoothScroll(scrollable, scrollable.scrollHeight, 2500);
+          const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+          // 1. Fade out overlay and enable scrolling
+          overlay.style.opacity = '0';
+          scrollable.classList.add('scrollable-enabled');
+          // Handle different animation paths based on motion preference
+          if (prefersReducedMotion) {
+            // Skip animation entirely for reduced motion
+            await wait(300);
+            overlay.classList.add('hidden');
+            // Show buttons immediately
+            showControlButtons();
+          } else {
+            // Start scroll animation while overlay fades
+            const scrollPromise = smoothScroll(scrollable, scrollable.scrollHeight, 2500);
+            await wait(300);
+            overlay.classList.add('hidden');
+            await scrollPromise;
+            showControlButtons();
+          }

feat: add interactive reveal button for code overlay and improve UI responsiveness #261

feat: add interactive reveal button for code overlay and improve UI responsiveness #261

Uh oh!

Conversation

jumski commented Oct 16, 2025

Uh oh!

changeset-bot bot commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

jumski commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

nx-cloud bot commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

graphite-app bot Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

graphite-app bot Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 18, 2025

🔍 Preview Deployment: Website

Uh oh!

github-actions bot commented Oct 18, 2025

🔍 Preview Deployment: Playground

Uh oh!

graphite-app bot commented Oct 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot bot commented Oct 16, 2025 •

edited

Loading

jumski commented Oct 16, 2025 •

edited

Loading

nx-cloud bot commented Oct 16, 2025 •

edited

Loading

graphite-app bot commented Oct 18, 2025 •

edited

Loading