From ae676f38d3f9f460b287f22032e6a56cdd15e774 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 13 Apr 2026 18:12:22 +0300
Subject: [PATCH] fix(options): automatic read-only size confused with OTP by
 KeepassXC

See https://github.com/keepassxreboot/keepassxc-browser/issues/2282
---
 apps/client/src/widgets/type_widgets/options/code_notes.tsx     | 2 +-
 .../src/widgets/type_widgets/options/components/OptionsRow.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/options/code_notes.tsx b/apps/client/src/widgets/type_widgets/options/code_notes.tsx
index 80c90ebda0..402c6da902 100644
--- a/apps/client/src/widgets/type_widgets/options/code_notes.tsx
+++ b/apps/client/src/widgets/type_widgets/options/code_notes.tsx
@@ -49,7 +49,7 @@ function Editor({ wordWrapping, setWordWrapping }: EditorProps) {
                 onChange={setWordWrapping}
             />
 
-            <OptionsRow name="auto-readonly-size-code" label={t("code_auto_read_only_size.label")} description={t("text_auto_read_only_size.description")}>
+            <OptionsRow name="source-readonly-threshold" label={t("code_auto_read_only_size.label")} description={t("text_auto_read_only_size.description")}>
                 <FormTextBoxWithUnit
                     type="number" min={0}
                     unit={t("text_auto_read_only_size.unit")}
diff --git a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx
index 5f5107c214..f29468167b 100644
--- a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx
+++ b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx
@@ -17,7 +17,7 @@ interface OptionsRowProps {
 
 export default function OptionsRow({ name, label, description, children, centered, stacked }: OptionsRowProps) {
     const id = useUniqueName(name);
-    const childWithId = cloneElement(children, { id });
+    const childWithId = cloneElement(children, { id, name });
 
     const className = `option-row ${centered ? "centered" : ""} ${stacked ? "stacked" : ""}`;