fix(sketch): simplify editor chrome and responsive layout - #5686
Merged
Conversation
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
1 participant
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.
What changed
Simplify Sketch Editor chrome with quieter actions, subtle editable surfaces, readable typography, and fewer nested borders. Tool settings wrap within the available canvas width, and side panels move into sheets based on the editor container. The Layers panel has clearer spacing, shorter creation labels, and a dedicated opacity value column while preserving selected states and keyboard focus.
Verification
npm run test:affected— 28 suites, 244 tests passed.NODE_OPTIONS=--max-old-space-size=8192 npm run typecheck— web, Electron, and mobile passed.npm run lint— passed.npm run dev:nodetool -- harness gate --base origin/main— passed, no automated selfchecks selected for this diff.Inspected the rendered editor at 1920×1080, 1280×720, 900×720, and 390×844, including dark and light themes. Exercised layer creation, visibility, duplication, deletion, opacity, blend modes, canvas resize, brush controls, tool panels, and keyboard focus return from the mobile Layers sheet. Added coverage for container resizing, hidden containers, and observer cleanup.
Screenshots
Desktop overview before and after the chrome changes. The final Layers refinement is shown separately below.
Final Layers spacing: