From 2abc5202d862e156af9bf621cd2f1c850417cb5a Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Thu, 27 Feb 2025 13:24:34 +0000
Subject: [PATCH 1/2] fix jumping of local style source when editing text on a
 token

---
 .../style-source/style-source-input.tsx       | 42 +++++++++----------
 1 file changed, 20 insertions(+), 22 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/style-source/style-source-input.tsx b/apps/builder/app/builder/features/style-panel/style-source/style-source-input.tsx
index 1c2de9ac629e..71131db8bc5f 100644
--- a/apps/builder/app/builder/features/style-panel/style-source/style-source-input.tsx
+++ b/apps/builder/app/builder/features/style-panel/style-source/style-source-input.tsx
@@ -204,28 +204,26 @@ const TextFieldBase: ForwardRefRenderFunction<
       onKeyDown={onKeyDown}
     >
       {/* We want input to be the first element in DOM so it receives the focus first */}
-      {editingItemId === undefined && (
-        <InputField
-          {...textFieldProps}
-          variant="chromeless"
-          css={{
-            fontVariantNumeric: "tabular-nums",
-            lineHeight: 1,
-            order: 1,
-            flex: 1,
-            "&:focus-within, &:hover": {
-              borderColor: "transparent",
-            },
-          }}
-          size="1"
-          value={label}
-          onClick={onClick}
-          ref={inputRef}
-          inputRef={internalInputRef}
-          spellCheck={false}
-          aria-label="New Style Source Input"
-        />
-      )}
+      <InputField
+        {...textFieldProps}
+        variant="chromeless"
+        css={{
+          fontVariantNumeric: "tabular-nums",
+          lineHeight: 1,
+          order: 1,
+          flex: 1,
+          "&:focus-within, &:hover": {
+            borderColor: "transparent",
+          },
+        }}
+        size="1"
+        value={label}
+        onClick={onClick}
+        ref={inputRef}
+        inputRef={internalInputRef}
+        spellCheck={false}
+        aria-label="New Style Source Input"
+      />
       {value.map((item) => (
         <StyleSourceControl
           key={item.id}

From 408d244acd8f1e7efb32090d89264f09b51a56b6 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Thu, 27 Feb 2025 13:25:29 +0000
Subject: [PATCH 2/2] making clickable surface of local complete size of the
 button

---
 .../style-panel/style-source/style-source-control.tsx | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/style-source/style-source-control.tsx b/apps/builder/app/builder/features/style-panel/style-source/style-source-control.tsx
index bd5c0aec9f48..c81226b8b0f9 100644
--- a/apps/builder/app/builder/features/style-panel/style-source/style-source-control.tsx
+++ b/apps/builder/app/builder/features/style-panel/style-source/style-source-control.tsx
@@ -318,20 +318,13 @@ export const StyleSourceControl = ({
         disabled={disabled}
         aria-current={selected && state === undefined}
         role="button"
+        onClick={onSelect}
         hasError={error !== undefined}
       >
-        <Flex
-          grow
-          css={{
-            position: "relative",
-            paddingBlock: theme.spacing[3],
-            paddingInline: theme.spacing[4],
-          }}
-        >
+        <Flex grow css={{ padding: theme.spacing[2] }}>
           <StyleSourceButton
             disabled={disabled || isEditing}
             isEditing={isEditing}
-            onClick={onSelect}
             tabIndex={-1}
           >
             <Flex align="center" justify="center" gap="1">