Skip to content

Conversation

@parthivsaikia
Copy link
Contributor

Notes for Reviewers

Signed commits

  • Yes, I signed my commits.

Description

This PR addresses the usability issue where the "Show Instructions" modal would block the drawing grid, preventing users from reading instructions and drawing simultaneously.

Changes:

  1. Removed the Show Instructions button and the blocking InstructionsModal component.
  2. Implemented a persistent, responsive "Keyboard Shortcut" bar directly on the main page.
  3. Utilized a "Key" style (similar to VS Code/GitHub UI) to make the shortcuts distinct and easy to scan.
  4. Refactored src/pages/index.js to accommodate the new layout.

This allows users to reference the controls (Enter, Ctrl+Z, etc.) without interrupting their workflow.

Screenshots

Before
image

After
image

@parthivsaikia parthivsaikia force-pushed the feat/73-better-instructions branch from 1ea77ab to 15105a7 Compare November 24, 2025 18:38
Copy link
Contributor

@kishore08-07 kishore08-07 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@parthivsaikia
It’s inappropriate to edit the package-lock.json unnecessarily,
kindly revert the changes made to package-lock.json.

@kishore08-07
Copy link
Contributor

@parthivsaikia
Thank you for your contribution!
Let's discuss this during the website call today at 6:30 PM IST | 8 AM CT
Add it as an agenda item to the meeting minutes, if you would :)

@parthivsaikia
Copy link
Contributor Author

@kishore08-07 I have reverted the changes. Can you check it out?

@saurabhraghuvanshii
Copy link
Contributor

@parthivsaikia merge conflicts

@parthivsaikia
Copy link
Contributor Author

@saurabhraghuvanshii can you check now

@saurabhraghuvanshii
Copy link
Contributor

@parthivsaikia LGTM. Just one minor change — the heading text should be larger. Right now, the instruction text is smaller than the description. Please follow the hierarchical structure.

@parthivsaikia parthivsaikia force-pushed the feat/73-better-instructions branch from 2a38f69 to 8f1ac87 Compare December 2, 2025 14:17
@parthivsaikia
Copy link
Contributor Author

@saurabhraghuvanshii I have changed the font size to 2 rem and increased the margin to 12px. I guess it should work now

@saurabhraghuvanshii
Copy link
Contributor

@parthivsaikia margin is too much reduce it Please 8px works
image

@saurabhraghuvanshii
Copy link
Contributor

@parthivsaikia thanks lgtm

@saurabhraghuvanshii saurabhraghuvanshii merged commit b610021 into meshery-extensions:master Dec 2, 2025
4 checks passed
@parthivsaikia
Copy link
Contributor Author

Welcome @saurabhraghuvanshii . I was going to reduce the margin to 8px. Is it not needed?

@saurabhraghuvanshii
Copy link
Contributor

no I done it you can check

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Added the better way to see the instructions

3 participants