Skip to content

Crumble UI touchups#1052

Merged
Strilanc merged 11 commits into
quantumlib:mainfrom
DeDuckProject:ui-touchups
May 11, 2026
Merged

Crumble UI touchups#1052
Strilanc merged 11 commits into
quantumlib:mainfrom
DeDuckProject:ui-touchups

Conversation

@DeDuckProject
Copy link
Copy Markdown
Contributor

@DeDuckProject DeDuckProject commented Apr 10, 2026

Made some Crumble UI touchups:

  • Fixed canvas blurriness which occurs on Retina display (and probably others)
  • example circuits open as modal instead of inline (closes by esc/outside-click/clicking the "x")
  • html style extracted to <style> tag - still inside the html file to ensure file is self-contained.
  • Small improvements to layout (mainly buttons layout)
  • main canvas size now dynamically calculated to fit screen (so no more scroll)

After:
Screenshot 2026-04-14 at 0 33 19

Before:
Screenshot 2026-04-10 at 13 38 03

@DeDuckProject DeDuckProject changed the title UI touchups Crumble UI touchups Apr 10, 2026
Copy link
Copy Markdown
Collaborator

@Strilanc Strilanc left a comment

Choose a reason for hiding this comment

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

I like the retina fixes and the dialog for the example circuits. But the other style changes seem sorta superfluous and appear to be breaking single-file-ness.

(Does hitting escape work for closing the dialog?)

Comment thread glue/crumble/crumble.css Outdated
Comment thread glue/crumble/crumble.css Outdated
@DeDuckProject
Copy link
Copy Markdown
Contributor Author

I like the retina fixes and the dialog for the example circuits. But the other style changes seem sorta superfluous and appear to be breaking single-file-ness.

(Does hitting escape work for closing the dialog?)

I like the escape idea - will implement that + inline styles and revert the button opinionated styling.

@DeDuckProject
Copy link
Copy Markdown
Contributor Author

DeDuckProject commented Apr 14, 2026

@Strilanc, I took care of your comments and can merge as far as I'm concerened.
In particular:

  • 'esc' closes dialog
  • Brought back CSS into html file, but in a <style> tag, for better separation of concerns
  • Removed opinionated styling for buttons, but left the layout (see updated screenshot in the PR description)
  • Fixed an issue where opening "import/export" temporarily changed the proportions of the canvas until closing it. Note, we are now calling "applyDevicePixelScaling" from multiple places (when resizing screen, when opening import/export..). Alternatively, we can just listen to the resize of the canvas itself, and handle that in a single place - the issue is that the entire canvas flickers upon resize, so I can add throttling, but I feel all this might be over-engineering and we might as well leave it at that. If you think we should go there - let me know; otherwise let's merge this.

@Strilanc Strilanc enabled auto-merge (squash) May 11, 2026 22:38
@Strilanc
Copy link
Copy Markdown
Collaborator

LGTM, I'll get it merged. Thanks!

@Strilanc Strilanc merged commit d6a159b into quantumlib:main May 11, 2026
57 checks passed
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.

2 participants