Playground: hide motion-export buttons on mobile#109
Merged
Conversation
The two motion-export buttons (Download BVH / Download glTF) auto-flowed into the mobile toolbar grid and landed in the left half of a row, leaving the right half empty and the cluster looking ragged. Group them in a `.tb-downloads` wrapper that is `display: contents` on desktop (so the desktop flex toolbar is unchanged) and becomes a single full-width grid row split into two equal halves on mobile. No design-language changes: same buttons, colours, and radius, just a balanced layout. Signed-off-by: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
… them A downloaded .bvh/.glb is only useful in a desktop pipeline (Blender, a Three.js project, a game engine), so the export buttons have no real audience on a phone. Hide .tb-downloads on mobile entirely rather than laying it out as a row, which removes the third toolbar row and keeps mobile to the two rows that matter. Desktop is unchanged and still shows both buttons. Signed-off-by: Claude <noreply@anthropic.com>
a-baran-orhan
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
The two motion-export buttons (Download BVH / Download glTF, added in #108) cluttered the mobile toolbar and — more importantly — have no real audience on a phone. A downloaded
.bvh/.glbis only useful in a desktop pipeline (Blender, a Three.js project, a game engine), none of which run on the device you'd be holding.So this keeps them on desktop and hides them on mobile:
.tb-downloadswrapper.display: contents— the wrapper is transparent, so the desktop flex toolbar is unchanged and still shows both buttons.display: none— removes the whole third toolbar row, leaving the two rows that matter (movement picker + primary CTA).No design-language changes — same buttons, colours, radius, and typography; just fewer, better-targeted controls on small screens.
Verified with the pre-installed Chromium: mobile (360/390px) now shows a clean two-row toolbar with no export row; desktop (1280px) is unchanged and still shows Download BVH / glTF.
Type of Change
.posecodescript and registering it)Checklist
npm run typecheckpasses successfullynpm run buildcompiles without errorsnpm test) and all tests passnpm run eval) and all checks pass — n/a (CSS/markup only)node scripts/generate-content-pages.mjsto regenerate the static pages — n/a🤖 Generated with Claude Code