fix: Fix local token clickable area (#4922)

## Description

1. Local token clickable area is now the entire button surface, closes
#4864
2. When editing token name, now local doesn't jump around

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

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">

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}