From 99044ddb2ec76b1f0ef08f7a72871a4f7b8b7b45 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 03:41:41 +0000
Subject: [PATCH 1/3] Initial plan


From 9a0e5250e534dbc2c6de5dbf29393f8a8a86907d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 19 Mar 2026 03:46:15 +0000
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC?=
 =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB=E5=89=8A=E9=99=A4=E6=99=82?=
 =?UTF-8?q?=E3=81=AB=E5=88=A5=E3=81=AE=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB?=
 =?UTF-8?q?=E3=81=8C=E5=89=8A=E9=99=A4=E3=81=95=E3=82=8C=E3=82=8B=E3=83=90?=
 =?UTF-8?q?=E3=82=B0=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: ujiro99 <677231+ujiro99@users.noreply.github.com>
---
 .../option/editor/UserStyleList.tsx           | 70 ++++++++++---------
 1 file changed, 38 insertions(+), 32 deletions(-)

diff --git a/packages/extension/src/components/option/editor/UserStyleList.tsx b/packages/extension/src/components/option/editor/UserStyleList.tsx
index 26963f4c..01e6756f 100644
--- a/packages/extension/src/components/option/editor/UserStyleList.tsx
+++ b/packages/extension/src/components/option/editor/UserStyleList.tsx
@@ -150,38 +150,44 @@ export const UserStyleList = ({ control }: UserStyleListProps) => {
               {array.fields
                 .filter((f) => isEditable(f.name))
                 .filter((f) => isValidStyle(f.name))
-                .map((field, index) => (
-                  <li
-                    key={field._id}
-                    className={cn(
-                      "flex items-center gap-2 px-2 py-1",
-                      index !== 0 ? "border-t" : "",
-                    )}
-                  >
-                    <p className="text-base font-mono flex-1 p-2">
-                      <span className="inline-block w-1/2">
-                        {t(
-                          `userStyles_option_${hyphen2Underscore(field.name)}`,
-                        )}
-                      </span>
-                      <span className="inline-block w-1/2 text-center">
-                        {field.value}
-                      </span>
-                    </p>
-                    <div className="flex gap-0.5 items-center">
-                      <EditButton
-                        onClick={() => {
-                          editorRef.current = field
-                          setDialogOpen(true)
-                        }}
-                      />
-                      <RemoveButton
-                        title={`${field.name}: ${field.value}`}
-                        onRemove={() => array.remove(index)}
-                      />
-                    </div>
-                  </li>
-                ))}
+                .map((field, filteredIndex) => {
+                  const originalIndex = array.fields.findIndex(
+                    (f) => f._id === field._id,
+                  )
+                  if (originalIndex === -1) return null
+                  return (
+                    <li
+                      key={field._id}
+                      className={cn(
+                        "flex items-center gap-2 px-2 py-1",
+                        filteredIndex !== 0 ? "border-t" : "",
+                      )}
+                    >
+                      <p className="text-base font-mono flex-1 p-2">
+                        <span className="inline-block w-1/2">
+                          {t(
+                            `userStyles_option_${hyphen2Underscore(field.name)}`,
+                          )}
+                        </span>
+                        <span className="inline-block w-1/2 text-center">
+                          {field.value}
+                        </span>
+                      </p>
+                      <div className="flex gap-0.5 items-center">
+                        <EditButton
+                          onClick={() => {
+                            editorRef.current = field
+                            setDialogOpen(true)
+                          }}
+                        />
+                        <RemoveButton
+                          title={`${field.name}: ${field.value}`}
+                          onRemove={() => array.remove(originalIndex)}
+                        />
+                      </div>
+                    </li>
+                  )
+                })}
             </ul>
           </FormControl>
           <UserStyleDialog

From 30031e40628c4710c1cdd0b16c35d1c2bcebf090 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 21 Mar 2026 09:50:10 +0900
Subject: [PATCH 3/3] Update: Match the label in the remove dialog with other
 UI elements.

---
 .../src/components/option/editor/UserStyleList.tsx    | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/extension/src/components/option/editor/UserStyleList.tsx b/packages/extension/src/components/option/editor/UserStyleList.tsx
index 01e6756f..7da74293 100644
--- a/packages/extension/src/components/option/editor/UserStyleList.tsx
+++ b/packages/extension/src/components/option/editor/UserStyleList.tsx
@@ -155,6 +155,9 @@ export const UserStyleList = ({ control }: UserStyleListProps) => {
                     (f) => f._id === field._id,
                   )
                   if (originalIndex === -1) return null
+                  const fieldLabel = t(
+                    `userStyles_option_${hyphen2Underscore(field.name)}`,
+                  )
                   return (
                     <li
                       key={field._id}
@@ -164,11 +167,7 @@ export const UserStyleList = ({ control }: UserStyleListProps) => {
                       )}
                     >
                       <p className="text-base font-mono flex-1 p-2">
-                        <span className="inline-block w-1/2">
-                          {t(
-                            `userStyles_option_${hyphen2Underscore(field.name)}`,
-                          )}
-                        </span>
+                        <span className="inline-block w-1/2">{fieldLabel}</span>
                         <span className="inline-block w-1/2 text-center">
                           {field.value}
                         </span>
@@ -181,7 +180,7 @@ export const UserStyleList = ({ control }: UserStyleListProps) => {
                           }}
                         />
                         <RemoveButton
-                          title={`${field.name}: ${field.value}`}
+                          title={`${fieldLabel}: ${field.value}`}
                           onRemove={() => array.remove(originalIndex)}
                         />
                       </div>