style: update LayersPanel layout styles#2105
Conversation
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Visual recap — skippedThe visual recap job did not run for this pull request. This is informational only and does not block the PR. Recap skipped for |
5400c3d to
b73f4e9
Compare
b73f4e9 to
c06d8ae
Compare
|
thanks @shivanshu11092003! the left/right scrolling is actually intentional, Figma does the same. but what they do better than us is they make the lock icon sticky so on hover they are never cutoff would love if we could match that
|
|
@steve8708 Yeah, I was using Figma as the reference and tried to match its behavior as closely as possible. I've updated it now to make the lock icon sticky on hover as well, similar to Figma. Please take a look when you get a chance. |
There was a problem hiding this comment.
Builder reviewed your changes and has a few items to flag 🟡
Review Details
Incremental Code Review Summary
The current PR head is unchanged from the previous incremental review. I re-checked the LayersPanel row sizing, compact h-7 layout, sticky action backgrounds, scroll behavior, and rename structure. The already-open keyboard accessibility issue remains applicable and was intentionally not reposted. No additional confirmed issue beyond that open comment was identified; the reported rename input height difference is a visual-detail concern and not sufficiently actionable for this low-risk review.
The dev server was brought up successfully. Browser verification was attempted, but all browser executors lacked Chrome automation tools, so the planned UI cases could not be verified.
🧪 Browser testing: Attempted after this review; blocked by unavailable Chrome automation tooling.
|
awesome @shivanshu11092003! great update, thanks for sending |


Description
🗂️ Layers Panel UI Layout & Scroll Improvements
w-max min-w-full. This ensures that deeply nested layers can be inspected without being cut off.sticky right-0 z-10 ml-auto bg-inherit pl-2 pr-1). These buttons now stay anchored on the right edge of the viewport and remain visible even when scrolling horizontally, matching Figma's exact behavior.bg-[var(--design-editor-panel-bg)]to the row innerdivto ensure that scrolling text is cleanly hidden beneath the sticky buttons block as it scrolls by.Before
After