From bf406a7ead2c35cbf091763c45f743592aa3a41e Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Fri, 27 Mar 2026 12:36:35 -0700
Subject: [PATCH] fix(flyout): align inline rename with non-rename styling

---
 .../collapsed-sidebar-menu.tsx                | 44 ++++++++++---------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
index ce8968e7d91..2aa727b68af 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
@@ -286,27 +286,29 @@ export function CollapsedWorkflowFlyoutItem({
 
   if (isEditing) {
     return (
-      <div className={EDIT_ROW_CLASS}>
-        <WorkflowColorSwatch color={workflow.color} />
-        <input
-          aria-label={`Rename workflow ${workflow.name}`}
-          ref={inputRef}
-          value={editValue ?? workflow.name}
-          onChange={(e) => onEditValueChange?.(e.target.value)}
-          onKeyDown={onEditKeyDown}
-          onBlur={onEditBlur}
-          className='w-full min-w-0 border-0 bg-transparent p-0 font-medium text-[12px] text-[var(--text-body)] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
-          maxLength={100}
-          disabled={isRenaming}
-          onClick={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-          }}
-          autoComplete='off'
-          autoCorrect='off'
-          autoCapitalize='off'
-          spellCheck='false'
-        />
+      <div className='group relative'>
+        <div className='flex min-w-0 cursor-default select-none items-center gap-2 rounded-[5px] bg-[var(--surface-active)] px-2 py-2 font-medium text-[var(--text-body)] text-caption outline-none'>
+          <WorkflowColorSwatch color={workflow.color} />
+          <input
+            aria-label={`Rename workflow ${workflow.name}`}
+            ref={inputRef}
+            value={editValue ?? workflow.name}
+            onChange={(e) => onEditValueChange?.(e.target.value)}
+            onKeyDown={onEditKeyDown}
+            onBlur={onEditBlur}
+            className='w-full min-w-0 border-0 bg-transparent p-0 font-medium text-[var(--text-body)] text-caption outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+            maxLength={100}
+            disabled={isRenaming}
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+            }}
+            autoComplete='off'
+            autoCorrect='off'
+            autoCapitalize='off'
+            spellCheck='false'
+          />
+        </div>
       </div>
     )
   }