add .value div for consistency and styling

client/components/combobox.jsx

@@ -8,6 +8,7 @@ const Combobox = createClass({
 	displayName     : 'Combobox',
 	getDefaultProps : function() {
 		return {
+			className   : '',
 			trigger     : 'hover',
 			default     : '',
 			autoSuggest : {

client/components/combobox.less

@@ -1,6 +1,5 @@
 .dropdown-container {
     position:relative;
-    flex: 1;
     input {
         width: 100%;
     }

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -224,7 +224,7 @@ const MetadataEditor = createClass({
 		const listLanguages = ()=>{
 			return _.map(langCodes.sort(), (code, index)=>{
 				const languageNames = new Intl.DisplayNames([code], { type: 'language' });
-				return <div className='item' title={''} key={`${index}`} data-value={`${code}`}>
+				return <div className='item' title={''} key={`${index}`} data-value={`${code}`} data-detail={`${languageNames.of(code)}`}>
 					{`${code}`}
 					<div className='detail'>{`${languageNames.of(code)}`}</div>
 				</div>;
@@ -234,13 +234,21 @@ const MetadataEditor = createClass({
 
 		return <div className='field language'>
 			<label>language</label>
-			<Combobox trigger='click'
-				default={this.props.metadata.lang || ''}
-				onSelect={(value)=>this.handleLanguage(value)}
-				onEntry={(e)=>{this.handleFieldChange('lang', e);}}
-				options={listLanguages()}
-				autoSuggest={{ suggestMethod: 'includes', clearAutoSuggestOnClick: true }}>
-			</Combobox>
+			<div className='value'>
+				<Combobox trigger='click'
+					className='language-dropdown'
+					default={this.props.metadata.lang || ''}
+					onSelect={(value)=>this.handleLanguage(value)}
+					onEntry={(e)=>{this.handleFieldChange('lang', e);}}
+					options={listLanguages()}
+					autoSuggest={{
+						suggestMethod           : 'includes',
+						clearAutoSuggestOnClick : true,
+						filterOn                : 'data-value'
+					}}>
+				</Combobox>
+			</div>
+
 		</div>;
 	},
 

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -85,6 +85,10 @@
 				font-size   : 0.8em;
 			}
 		}
+
+		&.language .language-dropdown {
+			max-width:150px;
+		}
 	}