diff --git a/dev/Component/EmailAddresses.js b/dev/Component/EmailAddresses.js
index b176e5969..12eecd41c 100644
--- a/dev/Component/EmailAddresses.js
+++ b/dev/Component/EmailAddresses.js
@@ -17,6 +17,8 @@ export class EmailAddressesComponent {
 		}
 
 		const self = this,
+			input = createElement('input',{type:"text", list:datalist.id,
+				autocomplete:"off", autocorrect:"off", autocapitalize:"off", spellcheck:"false"}),
 			// In Chrome we have no access to dataTransfer.getData unless it's the 'drop' event
 			// In Chrome Mobile dataTransfer.types.includes(contentType) fails, only text/plain is set
 			validDropzone = () => dragAddress?.li.parentNode !== self.ul,
@@ -55,13 +57,12 @@ export class EmailAddressesComponent {
 			}
 		});
 
-		self.input = createElement('input',{type:"text", list:datalist.id,
-			autocomplete:"off", autocorrect:"off", autocapitalize:"off", spellcheck:"false"});
+		self.input = input;
 
-		addEventsListeners(self.input, {
+		addEventsListeners(input, {
 			focus: () => {
 				self._focusTrigger(true);
-				self.input.value || self._resetDatalist();
+				input.value || self._resetDatalist();
 			},
 			blur: () => {
 				// prevent autoComplete menu click from causing a false 'blur'
@@ -71,8 +72,7 @@ export class EmailAddressesComponent {
 			keydown: e => {
 				if ('Backspace' === e.key || 'ArrowLeft' === e.key) {
 					// if our input contains no value and backspace has been pressed, select the last tag
-					var lastTag = self.inputCont.previousElementSibling,
-						input = self.input;
+					var lastTag = self.inputCont.previousElementSibling;
 					if (lastTag && (!input.value
 						|| (('selectionStart' in input) && input.selectionStart === 0 && input.selectionEnd === 0))
 					) {
@@ -93,11 +93,11 @@ export class EmailAddressesComponent {
 
 		// define starting placeholder
 		if (element.placeholder) {
-			self.input.placeholder = element.placeholder;
+			input.placeholder = element.placeholder;
 		}
 
 		self.inputCont = createElement('li',{class:"emailaddresses-input"});
-		self.inputCont.append(self.input);
+		self.inputCont.append(input);
 		self.ul.append(self.inputCont);
 
 		element.replaceWith(self.ul);
@@ -109,14 +109,23 @@ export class EmailAddressesComponent {
 
 		self._updateDatalist = self.options.autoCompleteSource
 			? (() => {
-				let value = self.input.value.trim();
+				let value = input.value.trim();
 				if (datalist.inputValue !== value) {
 					datalist.inputValue = value;
 					value.length && self.options.autoCompleteSource(
 						value,
 						items => {
 							self._resetDatalist();
-							items?.forEach(item => datalist.append(new Option(item)));
+							let chars = value.length;
+							items?.forEach(item => {
+								datalist.append(new Option(item));
+								chars = Math.max(chars, item.length);
+							});
+							// https://github.com/the-djmaze/snappymail/issues/368 and #513
+							chars *= 8;
+							if (input.clientWidth < chars) {
+								input.style.width = chars + 'px';
+							}
 						}
 					)
 				}