diff --git a/css/style.css b/css/style.css index 8ebc40e..167d7cd 100644 --- a/css/style.css +++ b/css/style.css @@ -1592,12 +1592,28 @@ input[type="range"]::-webkit-slider-thumb { margin-top: 6px; } .so-custom-row { - /* label | value | eye | copy | row menu */ + /* label | value (eye inside) | copy | row menu */ display: grid; - grid-template-columns: 1fr 1.4fr auto auto auto; + grid-template-columns: 1fr 1.4fr auto auto; gap: 4px; align-items: center; } +/* The reveal eye sits inside the field, like the TOTP one. */ +.so-custom-value-wrap { position: relative; display: flex; min-width: 0; } +.so-custom-value-wrap > .so-input, +.so-custom-value-wrap > .so-combo { width: 100%; } +.so-custom-value-wrap > .so-input { padding-right: 28px; } +.so-custom-value-eye { + position: absolute; + right: 3px; + top: 50%; + transform: translateY(-50%); +} +/* Multiline: pin it to the top corner, clear of the resize grip. */ +.so-custom-value-wrap.is-multiline .so-custom-value-eye { + top: 3px; + transform: none; +} /* The row menu is absolutely positioned inside its wrap; without this the slideover clips it or it lands under the next row. */ .so-custom-row .entry-kebab-wrap { position: relative; } @@ -1651,9 +1667,10 @@ input[type="range"]::-webkit-slider-thumb { .so-combo-item:hover { background: var(--accent); color: #fff; } /* The eye carries the secret state itself — a second toggle beside it read as a duplicate of the reveal. Flipping the flag lives in the row menu. */ +/* Cyan marker = the field is STORED as a secret, not merely hidden right now. */ .so-custom-row .icon-btn.is-secret { - background: var(--accent-soft); color: var(--accent); + background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 4px; } diff --git a/js/app.js b/js/app.js index 23ded0b..a77647a 100644 --- a/js/app.js +++ b/js/app.js @@ -4355,9 +4355,18 @@ function buildCustomFieldRow(field, idx, rerender) { kebabWrap.appendChild(kebabBtn); kebabWrap.appendChild(kebabMenu); + // Eye inside the field rather than beside it (same as the TOTP field): it + // buys back a whole column on an already dense row. Top-right, so it never + // sits on the textarea's resize grip. + const valueWrap = el('div', { + class: 'so-custom-value-wrap' + (field.multiline ? ' is-multiline' : ''), + }); + valueWrap.appendChild(valueSlot); + eye.classList.add('so-custom-value-eye'); + valueWrap.appendChild(eye); + row.appendChild(labelInput); - row.appendChild(valueSlot); - row.appendChild(eye); + row.appendChild(valueWrap); row.appendChild(copyBtn); row.appendChild(kebabWrap); applySecretState();