Improve layer panel legibility and fix motion badge overlap#55
Merged
Conversation
The left Layers panel had a flat type scale: folder headers and layer rows were both 11px, so folders didn't read as headers and rows were a uniform wall that was hard to scan. Give it a real hierarchy — folder headers 13px semibold, rows 12px, on/off 10px — with more row padding and folder spacing. Active rows now stand out with a left accent bar, tint, colored icon, and an ON pill so it's obvious at a glance which layers are live. Apply the same header/row size fix to the advanced "All sources" rail, whose headers were actually smaller than its rows. Center the "Predicted motion" chip so it no longer overlaps the left tool flyout, where it used to sit pinned in the bottom-left corner.
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
The left Layers panel had a flat type scale: folder headers and layer rows were both 11px, so folders didn't read as headers and rows were a uniform wall that was hard to scan.
ONpill, so it's obvious at a glance which layers are live.Verification
pnpm typecheck+ eslint green on all touched files.Pure presentation changes (className tweaks + one badge position); no logic touched.