more styles

wp-content/mu-plugins/assets/locale-switcher.js

@@ -26,9 +26,14 @@
 			accessibleAutocomplete.enhanceSelectElement( {
 				selectElement: localeSelect,
 				showAllValues: true,
-				// displayMenu: 'overlay' might be useful
+				placeholder: 'Search languages [glass]', // only shown when clear current manually
+				// might need to dynamically set `.autocomplete__input--show-all-values.autocomplete__input--focused { value }` field to set visible placeholder text
+
+
+				// displayMenu: 'overlay',// might be useful
 				// autoselect: false
 
+
 				// Submit the form.
 				onConfirm: function( localeName ) {
 					// Find the selected locale code.

wp-content/themes/twentyseventeen-wp20/style.css

@@ -770,6 +770,20 @@ body:not(.title-tagline-hidden) .site-branding-text {
 
 #wp20-locale-switcher {
 	border: none;
+	width: 100vw;
+	position: absolute;
+	left: -50vw;
+
+	/*  need more dynamic positioning, these are just hardcoded to get rough sense of things */
+}
+
+.autocomplete__menu {
+	width: 100vw;
+	position: absolute;
+	left: -50vw;
+	text-align: left;
+	top: 80px;
+	/*  need more dynamic positioning, these are just hardcoded to get rough sense of things */
 }
 
 .wp20-locale-switcher-container select {
@@ -789,18 +803,21 @@ input[type="text"].autocomplete__input--show-all-values {
 .autocomplete__input--show-all-values.autocomplete__input--focused {
 	cursor: text;
 	border: 1px solid blue none;
-	/* covered up by focus outline? */
+	/* covered up by focus outline?
+	blue not final color , just to identify*/
 }
 
 .autocomplete__hint {
+	position: relative;
+	top: 8px;
 	border: none;
 	background-color: var(--wp20--color--active-menu);
-	position: static;
+	padding-right: 40px;
 	cursor: pointer;
+	font-weight: 400;
+	text-align: right;
 }
 
-
-
 @media screen and (max-width: 48em) {
 	.wp20-locale-switcher-container .select2-container {
 		width: 100% !important; /* override selectWoo rule. locale-swithcer.js L24. */