Skip to content

style: update LayersPanel layout styles#2105

Merged
steve8708 merged 7 commits into
BuilderIO:mainfrom
shivanshu11092003:changes-477
Jul 14, 2026
Merged

style: update LayersPanel layout styles#2105
steve8708 merged 7 commits into
BuilderIO:mainfrom
shivanshu11092003:changes-477

Conversation

@shivanshu11092003

@shivanshu11092003 shivanshu11092003 commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

Description

🗂️ Layers Panel UI Layout & Scroll Improvements

  • Horizontal Scroll Support: Restored horizontal scroll capabilities by keeping the tree and row wrappers at w-max min-w-full. This ensures that deeply nested layers can be inspected without being cut off.
  • Sticky Actions: Wrapped the lock and hide buttons in a sticky container (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.
  • Visual Integrity: Applied bg-[var(--design-editor-panel-bg)] to the row inner div to ensure that scrolling text is cleanly hidden beneath the sticky buttons block as it scrolls by.

Before

brave_screenshot_localhost (6) brave_screenshot_localhost (7)

After

brave_screenshot_localhost (8)

@netlify

This comment has been minimized.

@netlify

This comment has been minimized.

@netlify

This comment has been minimized.

@github-actions

github-actions Bot commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

Visual recap — skipped

The visual recap job did not run for this pull request. This is informational only and does not block the PR.

Recap skipped for 927973b: external fork PR requires a maintainer to apply the recap label to the current head SHA.

@shivanshu11092003 shivanshu11092003 changed the title style: run formatter and update LayersPanel layout styles style: update LayersPanel layout styles Jul 13, 2026
builder-io-integration[bot]

This comment was marked as outdated.

builder-io-integration[bot]

This comment was marked as outdated.

builder-io-integration[bot]

This comment was marked as outdated.

builder-io-integration[bot]

This comment was marked as outdated.

@steve8708

Copy link
Copy Markdown
Contributor

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

image

@shivanshu11092003

shivanshu11092003 commented Jul 14, 2026

Copy link
Copy Markdown
Contributor Author

@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.
brave_screenshot_localhost (9)

builder-io-integration[bot]

This comment was marked as outdated.

@builder-io-integration builder-io-integration Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

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.

@steve8708

Copy link
Copy Markdown
Contributor

awesome @shivanshu11092003! great update, thanks for sending

@steve8708 steve8708 merged commit a93fc33 into BuilderIO:main Jul 14, 2026
24 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