changes as requested, wrapping of editor tools, and linting

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -151,7 +151,7 @@ const Snippetbar = createClass({
 	renderSnippetGroups : function(){
 		const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
 
-		return <div className="snippets">
+		return <div className='snippets'>
 			{_.map(snippets, (snippetGroup)=>{
 				return <SnippetGroup
 					brew={this.props.brew}
@@ -164,7 +164,7 @@ const Snippetbar = createClass({
 				/>;
 			})
 			}
-		</div>
+		</div>;
 	},
 
 	replaceContent : function(item){
@@ -223,6 +223,7 @@ const Snippetbar = createClass({
 		}
 
 		return <div className='editors'>
+			<div className='historyTools'>
 				<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
 					onClick={this.toggleHistoryMenu} >
 					<i className='fas fa-clock-rotate-left' />
@@ -236,15 +237,18 @@ const Snippetbar = createClass({
 					onClick={this.props.redo} >
 					<i className='fas fa-redo' />
 				</div>
-			<div className='divider'></div>
+			</div>
+			<div className='codeTools'>
 				{foldButtons}
 				<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
 					onClick={this.toggleThemeSelector} >
 					<i className='fas fa-palette' />
 					{this.state.themeSelector && this.renderThemeSelector()}
 				</div>
+			</div>
 
-			<div className='divider'></div>
+
+			<div className='tabs'>
 				<div className={cx('text', { selected: this.props.view === 'text' })}
 					onClick={()=>this.props.onViewChange('text')}>
 					<i className='fa fa-beer' />
@@ -257,22 +261,6 @@ const Snippetbar = createClass({
 					onClick={()=>this.props.onViewChange('meta')}>
 					<i className='fas fa-info-circle' />
 				</div>
-			<div className='divider'></div>
-			{foldButtons}
-			<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
-				onClick={this.toggleThemeSelector} >
-				<i className='fas fa-palette' />
-				{this.state.themeSelector && this.renderThemeSelector()}
-			</div>
-
-			<div className='divider'></div>
-			<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
-				onClick={this.props.undo} >
-				<i className='fas fa-undo' />
-			</div>
-			<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
-				onClick={this.props.redo} >
-				<i className='fas fa-redo' />
 			</div>
 
 		</div>;
@@ -280,9 +268,8 @@ const Snippetbar = createClass({
 
 	render : function(){
 		return <div className='snippetBar'>
-			{this.renderEditorButtons()}
 			{this.renderSnippetGroups()}
-			
+			{this.renderEditorButtons()}
 		</div>;
 	}
 });
@@ -315,7 +302,7 @@ const SnippetGroup = createClass({
 				<i className={snippet.icon} />
 				<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
 				{snippet.experimental && <span className='beta'>beta</span>}
-				{snippet.disabled     && <span className='beta' title="temporarily disabled due to large slowdown; under re-design">disabled</span>}
+				{snippet.disabled     && <span className='beta' title='temporarily disabled due to large slowdown; under re-design'>disabled</span>}
 				{snippet.subsnippets && <>
 					<i className='fas fa-caret-right'></i>
 					<div className='dropdown side'>

client/homebrew/editor/snippetbar/snippetbar.less

@@ -5,21 +5,30 @@
 	@menuHeight : 25px;
 	position         : relative;
 	min-width        : 331px;
-	height           : @menuHeight;
+	height           : auto;
 	color            : black;
 	background-color : #DDDDDD;
 	display: flex;
+	justify-content: space-between;
+	flex-wrap:wrap-reverse;
 
 	.snippets {
-		position        : absolute;
+		display         : flex;
-		top             : 0px;
+		justify-content : space-between;
-		right           : 0px;
 	}
 
 	.editors {
 		display         : flex;
 		justify-content : space-between;
-		height          : @menuHeight;
+		>div {
+			display:flex;
+			justify-content: space-around;
+			flex:1;
+			border-left:1px solid;
+
+			&:first-child {
+				border-left: none;
+			}
 
 			& > div {
 				width       : @menuHeight;
@@ -64,6 +73,7 @@
 					font-size : 0.75em;
 					color     : grey;
 					position  : relative;
+					border:none;
 					&.active {
 						color : inherit;
 					}
@@ -102,6 +112,7 @@
 				background-color : inherit;
 			}
 		}		
+	}
 	.snippetBarButton {
 		display        : inline-block;
 		height         : @menuHeight;
@@ -111,6 +122,7 @@
 		line-height    : @menuHeight;
 		text-transform : uppercase;
 		cursor         : pointer;
+		text-wrap: nowrap;
 		&:hover, &.selected { background-color : #999999; }
 		i {
 			margin-right   : 3px;
@@ -126,7 +138,8 @@
 		.tooltipLeft('Edit Brew Properties');
 	}
 	.snippetGroup {
-		border-left   : 1px solid currentColor;
+		border-right   : 1px solid currentColor;
+
 		&:hover {
 			& > .dropdown { visibility : visible; }
 		}
@@ -213,15 +226,16 @@
 	}
 }
 
-@container editor (width < 538px) {
+@container editor (width < 568px) {
 
-	.snippetBar {
+	.editors,.snippets {
-		display : flex;
+		width:332.59px;
-		flex-wrap : wrap;
+	}
-		height : 50px;
+	.editors {
+		border-right:1px solid;
+	}
+	.snippetBar .editors>div.history>.dropdown {
+		right:unset;
+	}
 
-		.snippets {
-			position : static;
-		}
-	}
 }