feat: update custom field input to textarea for better usability; enhance styles for improved display

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>

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>

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))}>

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;
 }