fix: improve mobile UI and reduce maxAttempts from 3 to 2

[jumski]

Improve mobile experience and fix DAG visualization dimming

This PR enhances the demo application with several improvements:

1. Fixed DAG visualization dimming behavior:

   • Added explicit DAG_STEPS constant to identify actual DAG steps
   • Modified dimming logic to only dim nodes when a DAG step is selected (not flow_config)

2. Added responsive mobile detection:

   • Implemented media query listeners to detect mobile viewports
   • Added cleanup for event listeners on component destruction

3. Improved JSON truncation for better mobile display:

   • Reduced truncation length to 50 characters on mobile (vs 500 on desktop)
   • Applied consistent truncation across EventsPanel and ExplanationPanel

4. Enhanced ExplanationPanel UI:

   • Improved layout and spacing for better readability
   • Added bottom padding on mobile to prevent content from being cut off
   • Refined the orchestration explainer section

5. Updated flow configuration:

   • Changed maxAttempts from 3 to 2 in all relevant files
   • Added explicit baseDelay parameter in the flow definition

[changeset-bot]

⚠️ No Changeset found

Latest commit: 556f4a1

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]

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

• chore: make tweaks to the demo copy, ui, colors, modals #361
• chore: fix demo code review commends #360
• fix: demo ci issues #359
• feat: add Plausible Analytics integration to demo app #342
• fix: improve mobile UI and reduce maxAttempts from 3 to 2 #341 👈 (View in Graphite)
• chore: remove test_flow_worker and add missing anon permissions #340
• feat: redesign UI layout with pulse dots and events panel #337
• feat: demo add synth events #332
• feat: add PR preview deployments for demo app #330
• feat: enhance mobile UI with animations and improved DAG visualization #329
• feat: demo rename slugs #328
• feat: demo improve modal copy #327
• feat: demo - split code block to separate #326
• feat: enhance CodePanel with mobile sections and responsive layout #325
• refactor: improve layout structure and responsiveness of the demo page #324
• style: improve UI layout and add descriptive annotations to components #323
• refactor: update testimonial data with new testimonials and correct author/source info #322
• feat: demo - fix the lint errors #319
• chore: setup demo deployments and small tweaks #318
• feat: add code panel and step selection with explanation UI #312
• feat: implement DAG visualization and debug panel with flowState props #311
• feat: implement article flow with parallel steps and retry logic #291
• feat: implement pgflow vertical slice with anonymous access #290
• feat: add SvelteKit demo app foundation #289
• main

---

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]

View your CI Pipeline Execution ↗ for commit 556f4a1

Command	Status	Duration	Result
nx affected -t deploy:preview --projects=demo -...	✅ Succeeded	59s	View ↗
nx affected -t verify-exports --base=d93b4fa048...	✅ Succeeded	<1s	View ↗
nx affected -t build --configuration=production...	✅ Succeeded	30s	View ↗
nx affected -t lint typecheck test --parallel -...	✅ Succeeded	18s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-11-11 14:45:20 UTC

[github-actions]

🔍 Preview Deployment: Website

✅ Deployment successful!

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

📝 Details:

• Branch: 11-10-feat_final_tweaks_v2
• Commit: 8781f38c28c30dd4d21de5199600485ecf782c7b
• View Logs

_Last updated: _

[github-actions]

🔍 Preview Deployment: Demo

✅ Deployment successful!

🔗 Preview URL: https://pr-341-pgflow-demo.jumski.workers.dev

📝 Details:

• Branch: 11-10-feat_final_tweaks_v2
• Commit: 8781f38c28c30dd4d21de5199600485ecf782c7b
• View Logs

_Last updated: _

[graphite-app]

Merge activity

• Nov 11, 8:50 PM UTC: jumski added this pull request to the Graphite merge queue.
• Nov 11, 8:53 PM UTC: The Graphite merge queue removed this pull request due to downstack failures on PR #289.
• Nov 11, 8:54 PM UTC: The Graphite merge queue removed this pull request due to downstack failures on PR #289.
• Nov 11, 9:05 PM UTC: jumski added this pull request to the Graphite merge queue.
• Nov 11, 9:06 PM UTC: CI is running for this pull request on a draft pull request (#362) due to your merge queue CI optimization settings.
• Nov 11, 9:07 PM UTC: Merged by the Graphite merge queue via draft PR: #362.