From a0d4d7a1ff27b0cbeb6038d5bef3939e44422883 Mon Sep 17 00:00:00 2001
From: shuaiplus <2327005759@qq.com>
Date: Sun, 10 May 2026 18:17:09 +0800
Subject: [PATCH] feat: update custom field input to textarea for better
 usability; enhance styles for improved display

---
 webapp/src/components/vault/VaultDetailView.tsx | 5 ++++-
 webapp/src/components/vault/VaultDialogs.tsx    | 6 +++++-
 webapp/src/components/vault/VaultEditor.tsx     | 6 +++++-
 webapp/src/styles/vault.css                     | 9 +++++++++
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/webapp/src/components/vault/VaultDetailView.tsx b/webapp/src/components/vault/VaultDetailView.tsx
index 63e8c8c..13cfdc8 100644
--- a/webapp/src/components/vault/VaultDetailView.tsx
+++ b/webapp/src/components/vault/VaultDetailView.tsx
@@ -357,7 +357,10 @@ export default function VaultDetailView(props: VaultDetailViewProps) {
                       <div className="custom-field-label" title={fieldName}>{fieldName}</div>
                       <div className="custom-field-body">
                         <div className="custom-field-value">
-                          <strong className="value-ellipsis" title={fieldType === 1 && !isHiddenVisible ? '' : rawValue}>
+                          <strong
+                            className={fieldType === 1 && !isHiddenVisible ? 'value-ellipsis' : 'custom-field-display'}
+                            title={fieldType === 1 && !isHiddenVisible ? '' : rawValue}
+                          >
                             {fieldType === 1 && !isHiddenVisible ? maskSecret(rawValue) : rawValue}
                           </strong>
                         </div>
diff --git a/webapp/src/components/vault/VaultDialogs.tsx b/webapp/src/components/vault/VaultDialogs.tsx
index a949c8c..efd0fa0 100644
--- a/webapp/src/components/vault/VaultDialogs.tsx
+++ b/webapp/src/components/vault/VaultDialogs.tsx
@@ -99,7 +99,11 @@ export default function VaultDialogs(props: VaultDialogsProps) {
         ) : (
           <label className="field">
             <span>{t('txt_field_value')}</span>
-            <input className="input" value={props.fieldValue} onInput={(e) => props.onFieldValueChange((e.currentTarget as HTMLInputElement).value)} />
+            <textarea
+              className="input textarea custom-field-textarea"
+              value={props.fieldValue}
+              onInput={(e) => props.onFieldValueChange((e.currentTarget as HTMLTextAreaElement).value)}
+            />
           </label>
         )}
       </ConfirmDialog>
diff --git a/webapp/src/components/vault/VaultEditor.tsx b/webapp/src/components/vault/VaultEditor.tsx
index 42a849e..191e471 100644
--- a/webapp/src/components/vault/VaultEditor.tsx
+++ b/webapp/src/components/vault/VaultEditor.tsx
@@ -632,7 +632,11 @@ export default function VaultEditor(props: VaultEditorProps) {
                       <span>{toBooleanFieldValue(field.value) ? t('txt_checked') : t('txt_unchecked')}</span>
                     </label>
                   ) : (
-                    <input className="input" value={field.value} onInput={(e) => props.onPatchDraftCustomField(originalIndex, { value: (e.currentTarget as HTMLInputElement).value })} />
+                    <textarea
+                      className="input textarea custom-field-textarea"
+                      value={field.value}
+                      onInput={(e) => props.onPatchDraftCustomField(originalIndex, { value: (e.currentTarget as HTMLTextAreaElement).value })}
+                    />
                   )}
                 </div>
                 <button type="button" className="btn btn-secondary small custom-field-remove" onClick={() => props.onUpdateDraftCustomFields(props.draft.customFields.filter((_, i) => i !== originalIndex))}>
diff --git a/webapp/src/styles/vault.css b/webapp/src/styles/vault.css
index 63cfdc1..f9b2c5d 100644
--- a/webapp/src/styles/vault.css
+++ b/webapp/src/styles/vault.css
@@ -921,6 +921,15 @@
   @apply w-full;
 }
 
+.custom-field-textarea {
+  @apply min-h-20;
+}
+
+.custom-field-display {
+  @apply block max-w-full whitespace-pre-wrap break-words text-sm font-semibold;
+  overflow-wrap: anywhere;
+}
+
 .custom-field-check {
   @apply mb-0 inline-flex items-center gap-2;
 }