From 5400c3d3ce9c2fbd6f446424e9627906dcc6a7fc Mon Sep 17 00:00:00 2001
From: shivanshu11092003 <shivanshugupta1109@gmail.com>
Date: Tue, 14 Jul 2026 03:33:24 +0530
Subject: [PATCH 1/7] style: run formatter and update LayersPanel layout styles

---
 .../design/app/components/design/LayersPanel.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/templates/design/app/components/design/LayersPanel.tsx b/templates/design/app/components/design/LayersPanel.tsx
index b23559f116..0bcc10455e 100644
--- a/templates/design/app/components/design/LayersPanel.tsx
+++ b/templates/design/app/components/design/LayersPanel.tsx
@@ -11,9 +11,9 @@ import {
   IconFrame,
   IconLayersSubtract,
   IconLayersUnion,
+  IconLayoutGrid,
   IconLock,
   IconLockOpen,
-  IconLayoutGrid,
   IconPencil,
   IconPlus,
   IconSearch,
@@ -30,8 +30,8 @@ import {
   useMemo,
   useRef,
   useState,
-  type KeyboardEvent,
   type DragEvent,
+  type KeyboardEvent,
   type MouseEvent,
   type ReactNode,
   type Ref,
@@ -1481,17 +1481,13 @@ function LayersPanelImpl(
 
         <div
           ref={scrollContainerRef}
-          className="min-h-0 flex-1 overflow-auto overscroll-contain py-2"
+          className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain py-2"
           onDragOver={handleRowsDragOver}
           onDrop={stopAutoScroll}
           onDragEnd={stopAutoScroll}
         >
           {visibleRows.length ? (
-            <div
-              className="w-max min-w-full px-2"
-              role="tree"
-              aria-label={labels.title}
-            >
+            <div className="w-full px-2" role="tree" aria-label={labels.title}>
               {visibleRows.map((row) => {
                 // Per-row primitives computed here (not inside LayerRow) so the
                 // row only receives booleans/strings it needs — no whole-tree
@@ -2047,7 +2043,7 @@ const LayerRow = memo(function LayerRow({
           aria-expanded={hasChildren ? isExpanded : undefined}
           aria-level={depth + 1}
           aria-selected={selectable ? isSelected : undefined}
-          className="relative min-w-full"
+          className="relative w-full min-w-0"
           draggable={draggable}
           onDragStart={handleDragStart}
           onDragOver={handleDragOver}
@@ -2087,7 +2083,7 @@ const LayerRow = memo(function LayerRow({
           ) : null}
           <div
             className={cn(
-              "group flex h-8 min-w-full items-center gap-1 rounded-[5px] pr-1 text-[12px]",
+              "group flex h-8 w-full min-w-0 items-center gap-1 rounded-[5px] pr-1 text-[12px]",
               activeDrop === "inside" &&
                 "ring-1 ring-inset ring-[var(--design-editor-accent-color)]",
               isSelected &&

From c06d8ae7604353fbcd4b744bd0ea1847cbae4d7b Mon Sep 17 00:00:00 2001
From: shivanshu11092003 <shivanshugupta1109@gmail.com>
Date: Tue, 14 Jul 2026 04:18:50 +0530
Subject: [PATCH 2/7] feat: make layers panel scrollable and actions sticky

---
 .../app/components/design/LayersPanel.tsx     | 138 +++++++++---------
 1 file changed, 73 insertions(+), 65 deletions(-)

diff --git a/templates/design/app/components/design/LayersPanel.tsx b/templates/design/app/components/design/LayersPanel.tsx
index 0bcc10455e..9db675af8d 100644
--- a/templates/design/app/components/design/LayersPanel.tsx
+++ b/templates/design/app/components/design/LayersPanel.tsx
@@ -1481,13 +1481,17 @@ function LayersPanelImpl(
 
         <div
           ref={scrollContainerRef}
-          className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain py-2"
+          className="min-h-0 flex-1 overflow-auto overscroll-contain py-2"
           onDragOver={handleRowsDragOver}
           onDrop={stopAutoScroll}
           onDragEnd={stopAutoScroll}
         >
           {visibleRows.length ? (
-            <div className="w-full px-2" role="tree" aria-label={labels.title}>
+            <div
+              className="w-max min-w-full px-2"
+              role="tree"
+              aria-label={labels.title}
+            >
               {visibleRows.map((row) => {
                 // Per-row primitives computed here (not inside LayerRow) so the
                 // row only receives booleans/strings it needs — no whole-tree
@@ -2043,7 +2047,7 @@ const LayerRow = memo(function LayerRow({
           aria-expanded={hasChildren ? isExpanded : undefined}
           aria-level={depth + 1}
           aria-selected={selectable ? isSelected : undefined}
-          className="relative w-full min-w-0"
+          className="relative w-max min-w-full"
           draggable={draggable}
           onDragStart={handleDragStart}
           onDragOver={handleDragOver}
@@ -2083,7 +2087,7 @@ const LayerRow = memo(function LayerRow({
           ) : null}
           <div
             className={cn(
-              "group flex h-8 w-full min-w-0 items-center gap-1 rounded-[5px] pr-1 text-[12px]",
+              "group flex h-8 w-max min-w-full items-center gap-1 rounded-[5px] pr-1 text-[12px] bg-[var(--design-editor-panel-bg)]",
               activeDrop === "inside" &&
                 "ring-1 ring-inset ring-[var(--design-editor-accent-color)]",
               isSelected &&
@@ -2229,67 +2233,71 @@ const LayerRow = memo(function LayerRow({
               ) : null}
             </button>
 
-            {lockable ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    className={cn(
-                      "size-5 shrink-0 rounded-sm p-0 text-muted-foreground opacity-0 hover:bg-transparent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100",
-                      node.locked && "opacity-100",
-                      isSelected && "text-foreground",
-                    )}
-                    aria-label={node.locked ? labels.unlock : labels.lock}
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      onToggleLocked?.(node.id, !node.locked);
-                    }}
-                  >
-                    {node.locked ? (
-                      <IconLock className="size-3" />
-                    ) : (
-                      <IconLockOpen className="size-3" />
-                    )}
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {node.locked ? labels.unlock : labels.lock}
-                </TooltipContent>
-              </Tooltip>
-            ) : null}
-
-            {hideable ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    className={cn(
-                      "size-5 shrink-0 rounded-sm p-0 text-muted-foreground opacity-0 hover:bg-transparent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100",
-                      node.hidden && "opacity-100",
-                      isSelected && "text-foreground",
-                    )}
-                    aria-label={node.hidden ? labels.show : labels.hide}
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      onToggleHidden?.(node.id, !node.hidden);
-                    }}
-                  >
-                    {node.hidden ? (
-                      <IconEyeOff className="size-3" />
-                    ) : (
-                      <IconEye className="size-3" />
-                    )}
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {node.hidden ? labels.show : labels.hide}
-                </TooltipContent>
-              </Tooltip>
-            ) : null}
+            {(lockable || hideable) && (
+              <div className="sticky right-0 z-10 ml-auto flex shrink-0 items-center gap-1 bg-inherit pl-2 pr-1">
+                {lockable ? (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className={cn(
+                          "size-5 shrink-0 rounded-sm p-0 text-muted-foreground opacity-0 hover:bg-transparent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100",
+                          node.locked && "opacity-100",
+                          isSelected && "text-foreground",
+                        )}
+                        aria-label={node.locked ? labels.unlock : labels.lock}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          onToggleLocked?.(node.id, !node.locked);
+                        }}
+                      >
+                        {node.locked ? (
+                          <IconLock className="size-3" />
+                        ) : (
+                          <IconLockOpen className="size-3" />
+                        )}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {node.locked ? labels.unlock : labels.lock}
+                    </TooltipContent>
+                  </Tooltip>
+                ) : null}
+
+                {hideable ? (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className={cn(
+                          "size-5 shrink-0 rounded-sm p-0 text-muted-foreground opacity-0 hover:bg-transparent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100",
+                          node.hidden && "opacity-100",
+                          isSelected && "text-foreground",
+                        )}
+                        aria-label={node.hidden ? labels.show : labels.hide}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          onToggleHidden?.(node.id, !node.hidden);
+                        }}
+                      >
+                        {node.hidden ? (
+                          <IconEyeOff className="size-3" />
+                        ) : (
+                          <IconEye className="size-3" />
+                        )}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {node.hidden ? labels.show : labels.hide}
+                    </TooltipContent>
+                  </Tooltip>
+                ) : null}
+              </div>
+            )}
           </div>
         </div>
       </ContextMenuTrigger>

From d9d9a51919c655a0333c8029109e410a4a76defb Mon Sep 17 00:00:00 2001
From: shivanshu11092003 <shivanshugupta1109@gmail.com>
Date: Tue, 14 Jul 2026 04:33:35 +0530
Subject: [PATCH 3/7] style: remove bg-inherit from sticky layers panel action
 buttons

---
 templates/design/app/components/design/LayersPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/design/app/components/design/LayersPanel.tsx b/templates/design/app/components/design/LayersPanel.tsx
index 9db675af8d..4533bb6fb1 100644
--- a/templates/design/app/components/design/LayersPanel.tsx
+++ b/templates/design/app/components/design/LayersPanel.tsx
@@ -2234,7 +2234,7 @@ const LayerRow = memo(function LayerRow({
             </button>
 
             {(lockable || hideable) && (
-              <div className="sticky right-0 z-10 ml-auto flex shrink-0 items-center gap-1 bg-inherit pl-2 pr-1">
+              <div className="sticky right-0 z-10 ml-auto flex shrink-0 items-center gap-1  pl-2 pr-1">
                 {lockable ? (
                   <Tooltip>
                     <TooltipTrigger asChild>

From a6da2b64177d1d4b7ccd73ec5fd1eb0c23ca8f98 Mon Sep 17 00:00:00 2001
From: shivanshu11092003 <shivanshugupta1109@gmail.com>
Date: Tue, 14 Jul 2026 04:53:09 +0530
Subject: [PATCH 4/7] style: restore bg-inherit to sticky layers panel action
 buttons

---
 templates/design/app/components/design/LayersPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/design/app/components/design/LayersPanel.tsx b/templates/design/app/components/design/LayersPanel.tsx
index 4533bb6fb1..9db675af8d 100644
--- a/templates/design/app/components/design/LayersPanel.tsx
+++ b/templates/design/app/components/design/LayersPanel.tsx
@@ -2234,7 +2234,7 @@ const LayerRow = memo(function LayerRow({
             </button>
 
             {(lockable || hideable) && (
-              <div className="sticky right-0 z-10 ml-auto flex shrink-0 items-center gap-1  pl-2 pr-1">
+              <div className="sticky right-0 z-10 ml-auto flex shrink-0 items-center gap-1 bg-inherit pl-2 pr-1">
                 {lockable ? (
                   <Tooltip>
                     <TooltipTrigger asChild>

From adefa2aa50fa7a4a9fc44ca4311e63c4931656ee Mon Sep 17 00:00:00 2001
From: shivanshu11092003 <shivanshugupta1109@gmail.com>
Date: Tue, 14 Jul 2026 15:42:34 +0530
Subject: [PATCH 5/7] style: update LayersPanel row height to h-7 and add solid
 backdrop behind sticky actions

---
 templates/design/app/components/design/LayersPanel.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/templates/design/app/components/design/LayersPanel.tsx b/templates/design/app/components/design/LayersPanel.tsx
index 9db675af8d..01a5f89a43 100644
--- a/templates/design/app/components/design/LayersPanel.tsx
+++ b/templates/design/app/components/design/LayersPanel.tsx
@@ -2087,7 +2087,7 @@ const LayerRow = memo(function LayerRow({
           ) : null}
           <div
             className={cn(
-              "group flex h-8 w-max min-w-full items-center gap-1 rounded-[5px] pr-1 text-[12px] bg-[var(--design-editor-panel-bg)]",
+              "group flex h-7 w-max min-w-full items-center gap-1 rounded-[5px] pr-1 text-[12px] bg-[var(--design-editor-panel-bg)]",
               activeDrop === "inside" &&
                 "ring-1 ring-inset ring-[var(--design-editor-accent-color)]",
               isSelected &&
@@ -2235,6 +2235,8 @@ const LayerRow = memo(function LayerRow({
 
             {(lockable || hideable) && (
               <div className="sticky right-0 z-10 ml-auto flex shrink-0 items-center gap-1 bg-inherit pl-2 pr-1">
+                {/* Solid backdrop to prevent scrolling text from showing through semi-transparent row backgrounds */}
+                <div className="absolute inset-0 -z-10 bg-[var(--design-editor-panel-bg)] rounded-r-[5px]" />
                 {lockable ? (
                   <Tooltip>
                     <TooltipTrigger asChild>

From e3014788540f131f84641d43787a69169488b7cf Mon Sep 17 00:00:00 2001
From: shivanshu11092003 <shivanshugupta1109@gmail.com>
Date: Tue, 14 Jul 2026 15:55:33 +0530
Subject: [PATCH 6/7] fix(design): conditionally collapse lock and hide
 controls in layers panel

---
 .../design/app/components/design/LayersPanel.tsx    | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/templates/design/app/components/design/LayersPanel.tsx b/templates/design/app/components/design/LayersPanel.tsx
index 01a5f89a43..7011778c87 100644
--- a/templates/design/app/components/design/LayersPanel.tsx
+++ b/templates/design/app/components/design/LayersPanel.tsx
@@ -2234,9 +2234,16 @@ const LayerRow = memo(function LayerRow({
             </button>
 
             {(lockable || hideable) && (
-              <div className="sticky right-0 z-10 ml-auto flex shrink-0 items-center gap-1 bg-inherit pl-2 pr-1">
-                {/* Solid backdrop to prevent scrolling text from showing through semi-transparent row backgrounds */}
-                <div className="absolute inset-0 -z-10 bg-[var(--design-editor-panel-bg)] rounded-r-[5px]" />
+              <div
+                className={cn(
+                  "sticky right-0 z-10 ml-auto flex shrink-0 items-center gap-1 bg-inherit",
+                  node.locked || node.hidden
+                    ? "w-auto overflow-visible pl-2 pr-1"
+                    : "w-0 overflow-hidden pl-0 pr-0 group-hover:w-auto group-hover:overflow-visible group-hover:pl-2 group-hover:pr-1",
+                )}
+              >
+                <div className="absolute inset-0 -z-20 bg-[var(--design-editor-panel-bg)]" />
+                <div className="absolute inset-0 -z-10 bg-inherit" />
                 {lockable ? (
                   <Tooltip>
                     <TooltipTrigger asChild>

From 927973b13c47df9f79233c3363bcb353488b4294 Mon Sep 17 00:00:00 2001
From: shivanshu11092003 <shivanshugupta1109@gmail.com>
Date: Tue, 14 Jul 2026 16:55:40 +0530
Subject: [PATCH 7/7] fix(design): expand lock/hide wrapper on focus-within to
 support keyboard navigation

---
 templates/design/app/components/design/LayersPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/design/app/components/design/LayersPanel.tsx b/templates/design/app/components/design/LayersPanel.tsx
index 7011778c87..0d3112ed51 100644
--- a/templates/design/app/components/design/LayersPanel.tsx
+++ b/templates/design/app/components/design/LayersPanel.tsx
@@ -2239,7 +2239,7 @@ const LayerRow = memo(function LayerRow({
                   "sticky right-0 z-10 ml-auto flex shrink-0 items-center gap-1 bg-inherit",
                   node.locked || node.hidden
                     ? "w-auto overflow-visible pl-2 pr-1"
-                    : "w-0 overflow-hidden pl-0 pr-0 group-hover:w-auto group-hover:overflow-visible group-hover:pl-2 group-hover:pr-1",
+                    : "w-0 overflow-hidden pl-0 pr-0 group-hover:w-auto group-hover:overflow-visible group-hover:pl-2 group-hover:pr-1 focus-within:w-auto focus-within:overflow-visible focus-within:pl-2 focus-within:pr-1",
                 )}
               >
                 <div className="absolute inset-0 -z-20 bg-[var(--design-editor-panel-bg)]" />