Skip to content

feat: enhance CodePanel with mobile sections and responsive layout #325

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
Closed
wants to merge 1 commit into from
Closed

feat: enhance CodePanel with mobile sections and responsive layout #325

wants to merge 1 commit into from

Conversation

@jumski
Copy link
Contributor

@jumski jumski commented Nov 7, 2025 •
edited
Loading

Mobile Responsive UI Improvements

  • Added separate syntax highlighting for mobile code sections
  • Implemented mobile-specific UI for code display and step details
  • Introduced mobile event stream and explanation panels with slide-up animations
  • Updated layout styles for responsiveness and full-height views
  • Added mobile toggle buttons for event stream and explanation panels
  • Modified flow code data structure to include mobileCode variants
  • Improved page structure with sticky header and adaptive grid layouts
  • Enhanced step status indicators with vertical colored borders for mobile
  • Simplified welcome modal content with more concise explanations
  • Added visual guidance with pulsing dots to highlight interactive elements

@changeset-bot
Copy link

changeset-bot bot commented Nov 7, 2025 •
edited
Loading

⚠️ No Changeset found

Latest commit: ee8cb44

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

This was referenced Nov 7, 2025
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
Closed
@jumski Graphite App
Copy link
Contributor Author

jumski commented Nov 7, 2025 •
edited
Loading

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.

This was referenced Nov 7, 2025
Closed
Closed
Closed
@nx-cloud
Copy link

nx-cloud bot commented Nov 7, 2025 •
edited
Loading

View your CI Pipeline Execution ↗ for commit ee8cb44

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

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

graphite-app[bot]
graphite-app bot reviewed Nov 7, 2025
View reviewed changes
This was referenced Nov 7, 2025
Closed
Closed
@jumski jumski force-pushed the feat-demo-switch-to-css-grid branch from c82be00 to 6a77674 Compare November 9, 2025 15:16
@jumski jumski force-pushed the feat-demo-mobile-xs-layout branch from fbb14a3 to 5c62786 Compare November 9, 2025 15:16
@jumski jumski mentioned this pull request Nov 9, 2025
Closed
@jumski jumski force-pushed the feat-demo-switch-to-css-grid branch from 6a77674 to e505242 Compare November 10, 2025 16:42
@jumski jumski force-pushed the feat-demo-mobile-xs-layout branch from 5c62786 to 27f0ffb Compare November 10, 2025 16:42
This was referenced Nov 10, 2025
Closed
Closed
Closed
Closed
@jumski jumski force-pushed the feat-demo-switch-to-css-grid branch from e505242 to da00eb0 Compare November 10, 2025 20:45
@jumski jumski force-pushed the feat-demo-mobile-xs-layout branch from 27f0ffb to 763ce83 Compare November 10, 2025 20:45
@jumski jumski force-pushed the feat-demo-mobile-xs-layout branch from 763ce83 to a2ffd7a Compare November 10, 2025 23:37
@jumski jumski force-pushed the feat-demo-switch-to-css-grid branch from da00eb0 to b10a293 Compare November 10, 2025 23:37
@jumski
feat: enhance CodePanel with mobile sections and responsive layout
ee8cb44 
- Added separate syntax highlighting for mobile code sections
- Implemented mobile-specific UI for code display and step details
- Introduced mobile event stream and explanation panels with slide-up animations
- Updated layout styles for responsiveness and full-height views
- Added mobile toggle buttons for event stream and explanation panels
- Modified flow code data structure to include mobileCode variants
- Improved page structure with sticky header and adaptive grid layouts
@jumski jumski force-pushed the feat-demo-mobile-xs-layout branch from a2ffd7a to ee8cb44 Compare November 11, 2025 14:38
@jumski jumski force-pushed the feat-demo-switch-to-css-grid branch from b10a293 to 8edd003 Compare November 11, 2025 14:38
This was referenced Nov 11, 2025
Closed
Closed
Closed
@graphite-app
Copy link
Contributor

graphite-app bot commented Nov 11, 2025 •
edited
Loading

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.

graphite-app bot pushed a commit that referenced this pull request Nov 11, 2025
@jumski
feat: enhance CodePanel with mobile sections and responsive layout (#325
03fe673 
)

# Mobile Responsive UI Improvements

- Added separate syntax highlighting for mobile code sections
- Implemented mobile-specific UI for code display and step details
- Introduced mobile event stream and explanation panels with slide-up animations
- Updated layout styles for responsiveness and full-height views
- Added mobile toggle buttons for event stream and explanation panels
- Modified flow code data structure to include mobileCode variants
- Improved page structure with sticky header and adaptive grid layouts
- Enhanced step status indicators with vertical colored borders for mobile
- Simplified welcome modal content with more concise explanations
- Added visual guidance with pulsing dots to highlight interactive elements
@graphite-app graphite-app bot closed this Nov 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@graphite-app graphite-app[bot] graphite-app[bot] left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@jumski