infrastructure/mox
1
0
Fork 0
mirror of https://github.com/mjl-/mox.git synced 2025-07-14 05:34:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

webmail: autoresize address input field in compose window

Browse Source 
so full name/email address is visible.

using a hidden grid element that gets the same content as the input element.
from https://css-tricks.com/auto-growing-inputs-textareas/

a recent commit probably also make the compose window full-screen-width on
chrome, this restores to the intended behaviour of a less wide default size.

if you add multiple address fields, the compose window will still grow. not
great, in the future, we should make the compose window resizable by dragging.
This commit is contained in:
Mechiel Lukkien
2023-10-15 10:42:20 +02:00
parent 101c2703d2
commit 4ab3e6bc9b
3 changed files with 68 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
webmail/webmail.html
View File

@ -68,6 +68,9 @@ table.search td { padding: .25em; }
.quoted1 { color: #03828f; }
.quoted2 { color: #c7445c; }
.quoted3 { color: #417c10; }
.autosize { display: inline-grid; max-width: 90vw; }
.autosize.input { grid-area: 1 / 2; }
.autosize::after { content: attr(data-value); margin-right: 1em; line-height: 0; visibility: hidden; white-space: pre-wrap; overflow-x: hidden; }
.scrollparent { position: relative; }
.yscroll { overflow-y: scroll; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }