use common CSS

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable max-lines */
-import './metadataEditor.less';
+import '../uiEditor.less';
 import React from 'react';
 import createReactClass from 'create-react-class';
 import _ from 'lodash';
@@ -355,7 +355,7 @@ const MetadataEditor = createReactClass({
 	},
 
 	render : function(){
-		return <div className='metadataEditor'>
+		return <div className='metadataEditor ui-editor'>
 			<h1>Properties Editor</h1>
 
 			<div className='field title'>

client/homebrew/editor/settingsEditor/settingsEditor.jsx

@@ -1,4 +1,4 @@
-import './settingsEditor.less';
+import '../uiEditor.less';
 import React, { useState } from 'react';
 
 const SettingsEditor = ({ settings, updateSettings = ()=>{} })=>{
@@ -50,7 +50,7 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
 	};
 
 	return (
-		<div className='settingsEditor'>
+		<div className='settingsEditor ui-editor'>
 			<h1>Editor Settings</h1>
 			{/*
 			<div className='field title'>
@@ -66,10 +66,11 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
 				/>
 			</div> */}
 
-			<div className='field title'>
+			<div className='field'>
 				<label htmlFor='autoCloseBrackets'>
 					Automatically close brackets
 				</label>
+				<div className='value'>
 					<input
 						id='autoCloseBrackets'
 						type='checkbox'
@@ -78,11 +79,13 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
 						onChange={(e)=>handleFieldChange('autoCloseBrackets', e)}
 					/>
 				</div>
+			</div>
 
-			<div className='field title'>
+			<div className='field'>
 				<label htmlFor='showImagePreviews'>
 					Show Image Previews when hovering a link
 				</label>
+				<div className='value'>
 					<input
 						id='showImagePreviews'
 						type='checkbox'
@@ -91,11 +94,13 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
 						onChange={(e)=>handleFieldChange('showImagePreviews', e)}
 					/>
 				</div>
+			</div>
 
-			<div className='field title'>
+			<div className='field'>
 				<label htmlFor='activeLineShading'>
 					Background shading of active line
 				</label>
+				<div className='value'>
 					<input
 						id='activeLineShading'
 						type='checkbox'
@@ -105,8 +110,11 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
 					/>
 				</div>
 
-			<div className='field title'>
+			</div>
+
+			<div className='field'>
 				<label htmlFor='lineNumbers'>Show Line Numbers</label>
+				<div className='value'>
 					<input
 						id='lineNumbers'
 						type='checkbox'
@@ -115,11 +123,13 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
 						onChange={(e)=>handleFieldChange('lineNumbers', e)}
 					/>
 				</div>
+			</div>
 
-			<div className='field title'>
+			<div className='field'>
 				<label htmlFor='fontSize'>
 					Editor Font Size (in px)
 				</label>
+				<div className='value'>
 					<input
 						id='fontSize'
 						type='number'
@@ -131,6 +141,7 @@ const SettingsEditor = ({settings, updateSettings = () => {} }) => {
 					/>
 				</div>
 			</div>
+		</div>
 	);
 };
 

client/homebrew/editor/uiEditor.less

@@ -5,7 +5,7 @@
 	padding-left  : 10px;
 }
 
-.metadataEditor {
+.ui-editor {
 	position         : absolute;
 	box-sizing       : border-box;
 	width            : 100%;
@@ -60,6 +60,7 @@
 		& > .value {
 			flex           : 1 1 auto;
 			width          : 50px;
+			justify-self: end;
 			&[data-tooltip-right] { max-width : 380px; }
 			&:invalid { background : #FFB9B9; }
 			small {
@@ -68,6 +69,11 @@
 				font-style  : italic;
 				line-height : 1.4em;
 			}
+
+			input[type='checkbox'] {
+				display:block;
+				margin-left:auto;
+			}
 		}
 		input[type='text'], textarea {
 			border : 1px solid gray;
@@ -372,3 +378,10 @@
 		}
 	}
 }
+
+
+.settingsEditor .field {
+	> label {
+		width:200px;
+	}
+}