From f449132b4c446e3c1659d26578156e7668ed5752 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Wed, 14 Aug 2024 20:38:38 +0200
Subject: [PATCH 1/7] wrap correctly

---
 client/homebrew/editor/editor.less                |  1 +
 client/homebrew/editor/snippetbar/snippetbar.less | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/client/homebrew/editor/editor.less b/client/homebrew/editor/editor.less
index f8dc249d64..b2e96683e9 100644
--- a/client/homebrew/editor/editor.less
+++ b/client/homebrew/editor/editor.less
@@ -2,6 +2,7 @@
 .editor {
 	position : relative;
 	width    : 100%;
+	container: editor / inline-size;
 
 	.codeEditor {
 		height            : 100%;
diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index e0a24fac99..19d4c3d4fa 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -2,11 +2,18 @@
 @import (less) '././././themes/fonts/5e/fonts.less';
 
 .snippetBar {
-	@menuHeight      : 25px;
+	@menuHeight : 25px;
 	position         : relative;
 	height           : @menuHeight;
 	color            : black;
 	background-color : #DDDDDD;
+	min-width		 : 331px;
+
+	@container editor (width < 538px) {
+		display : flex;
+		flex-wrap : wrap;
+		height : 50px;
+	}
 
 	.editors {
 		position        : absolute;
@@ -15,6 +22,11 @@
 		display         : flex;
 		justify-content : space-between;
 		height          : @menuHeight;
+
+		@container editor (width < 538px) {
+			position : static; 
+		}
+		
 		& > div {
 			width       : @menuHeight;
 			height      : @menuHeight;

From bbe56bf4435b3f68550e3387b2812a78cb725304 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Wed, 14 Aug 2024 20:39:15 +0200
Subject: [PATCH 2/7] linting

---
 client/homebrew/editor/snippetbar/snippetbar.less | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index 19d4c3d4fa..86e4c9ffcf 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -4,10 +4,10 @@
 .snippetBar {
 	@menuHeight : 25px;
 	position         : relative;
+	min-width        : 331px;
 	height           : @menuHeight;
 	color            : black;
 	background-color : #DDDDDD;
-	min-width		 : 331px;
 
 	@container editor (width < 538px) {
 		display : flex;
@@ -139,11 +139,11 @@
 				cursor      : pointer;
 				.animate(background-color);
 				i {
+					min-width    : 25px;
 					height       : 1.2em;
 					margin-right : 8px;
 					font-size    : 1.2em;
-					min-width: 25px;
-					text-align: center;
+					text-align   : center;
 					& ~ i {
 						margin-right : 0;
 						margin-left  : 5px;

From cc76ff147843fccb7f1f9c5c40140bf2b2e04f49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Thu, 15 Aug 2024 12:07:55 +0200
Subject: [PATCH 3/7] relocated container query

---
 .../editor/snippetbar/snippetbar.less         | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index 86e4c9ffcf..7180da5626 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -9,12 +9,6 @@
 	color            : black;
 	background-color : #DDDDDD;
 
-	@container editor (width < 538px) {
-		display : flex;
-		flex-wrap : wrap;
-		height : 50px;
-	}
-
 	.editors {
 		position        : absolute;
 		top             : 0px;
@@ -22,10 +16,6 @@
 		display         : flex;
 		justify-content : space-between;
 		height          : @menuHeight;
-
-		@container editor (width < 538px) {
-			position : static; 
-		}
 		
 		& > div {
 			width       : @menuHeight;
@@ -201,4 +191,17 @@
 			}
 		}
 	}
+}
+
+@container editor (width < 538px) {
+
+	.snippetBar {
+		display : flex;
+		flex-wrap : wrap;
+		height : 50px;
+
+		.editors {
+			position : static;
+		}
+	}
 }
\ No newline at end of file

From 1f41745d2b47267db25ee5105f220f68e0c41998 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Fri, 23 Aug 2024 13:37:12 +0200
Subject: [PATCH 4/7] "Refactored Snippetbar component: updated JSX structure,
 added div wrapper for snippets, changed CSS styles for editors and snippets"

---
 .../homebrew/editor/snippetbar/snippetbar.jsx | 62 ++++++++++---------
 .../editor/snippetbar/snippetbar.less         | 10 ++-
 2 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index af493c961d..dd45f07731 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -125,19 +125,23 @@ const Snippetbar = createClass({
 	renderSnippetGroups : function(){
 		const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
 
-		return _.map(snippets, (snippetGroup)=>{
-			return <SnippetGroup
-				brew={this.props.brew}
-				groupName={snippetGroup.groupName}
-				icon={snippetGroup.icon}
-				snippets={snippetGroup.snippets}
-				key={snippetGroup.groupName}
-				onSnippetClick={this.handleSnippetClick}
-				cursorPos={this.props.cursorPos}
-			/>;
-		});
+		return <div className="snippets">
+			{_.map(snippets, (snippetGroup)=>{
+				return <SnippetGroup
+					brew={this.props.brew}
+					groupName={snippetGroup.groupName}
+					icon={snippetGroup.icon}
+					snippets={snippetGroup.snippets}
+					key={snippetGroup.groupName}
+					onSnippetClick={this.handleSnippetClick}
+					cursorPos={this.props.cursorPos}
+					/>;
+				})
+			}
+		</div>
 	},
 
+
 	renderEditorButtons : function(){
 		if(!this.props.showEditButtons) return;
 
@@ -158,14 +162,18 @@ const Snippetbar = createClass({
 		}
 
 		return <div className='editors'>
-			<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
-				onClick={this.props.undo} >
-				<i className='fas fa-undo' />
+			<div className={cx('text', { selected: this.props.view === 'text' })}
+				 onClick={()=>this.props.onViewChange('text')}>
+				<i className='fa fa-beer' />
 			</div>
-			<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
-				onClick={this.props.redo} >
-				<i className='fas fa-redo' />
+			<div className={cx('style', { selected: this.props.view === 'style' })}
+				 onClick={()=>this.props.onViewChange('style')}>
+				<i className='fa fa-paint-brush' />
 			</div>
+			<div className={cx('meta', { selected: this.props.view === 'meta' })}
+				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' : ''}`}
@@ -175,25 +183,23 @@ const Snippetbar = createClass({
 			</div>
 
 			<div className='divider'></div>
-			<div className={cx('text', { selected: this.props.view === 'text' })}
-				 onClick={()=>this.props.onViewChange('text')}>
-				<i className='fa fa-beer' />
-			</div>
-			<div className={cx('style', { selected: this.props.view === 'style' })}
-				 onClick={()=>this.props.onViewChange('style')}>
-				<i className='fa fa-paint-brush' />
+			<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
+				onClick={this.props.undo} >
+				<i className='fas fa-undo' />
 			</div>
-			<div className={cx('meta', { selected: this.props.view === 'meta' })}
-				onClick={()=>this.props.onViewChange('meta')}>
-				<i className='fas fa-info-circle' />
+			<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
+				onClick={this.props.redo} >
+				<i className='fas fa-redo' />
 			</div>
+			
 		</div>;
 	},
 
 	render : function(){
 		return <div className='snippetBar'>
-			{this.renderSnippetGroups()}
 			{this.renderEditorButtons()}
+			{this.renderSnippetGroups()}
+			
 		</div>;
 	}
 });
diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index 7180da5626..7b0754a07e 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -8,11 +8,15 @@
 	height           : @menuHeight;
 	color            : black;
 	background-color : #DDDDDD;
+	display: flex;
 
-	.editors {
+	.snippets {
 		position        : absolute;
 		top             : 0px;
 		right           : 0px;
+	}
+
+	.editors {
 		display         : flex;
 		justify-content : space-between;
 		height          : @menuHeight;
@@ -107,7 +111,7 @@
 		.tooltipLeft('Edit Brew Properties');
 	}
 	.snippetGroup {
-		border-right   : 1px solid currentColor;
+		border-left   : 1px solid currentColor;
 		&:hover {
 			& > .dropdown { visibility : visible; }
 		}
@@ -200,7 +204,7 @@
 		flex-wrap : wrap;
 		height : 50px;
 
-		.editors {
+		.snippets {
 			position : static;
 		}
 	}

From 5a75182affeada869e75a177124a749143231037 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Fri, 18 Oct 2024 00:52:26 +0200
Subject: [PATCH 5/7] changes as requested, wrapping of editor tools, and
 linting

---
 .../homebrew/editor/snippetbar/snippetbar.jsx |  95 ++++-----
 .../editor/snippetbar/snippetbar.less         | 194 ++++++++++--------
 2 files changed, 145 insertions(+), 144 deletions(-)

diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index fc6bc6db61..8e643a8377 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/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}
@@ -161,10 +161,10 @@ const Snippetbar = createClass({
 					key={snippetGroup.groupName}
 					onSnippetClick={this.handleSnippetClick}
 					cursorPos={this.props.cursorPos}
-					/>;
-				})
+				/>;
+			})
 			}
-		</div>
+		</div>;
 	},
 
 	replaceContent : function(item){
@@ -223,66 +223,53 @@ const Snippetbar = createClass({
 		}
 
 		return <div className='editors'>
-			<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
-				onClick={this.toggleHistoryMenu} >
-				<i className='fas fa-clock-rotate-left' />
-				{ this.state.showHistory && this.renderHistoryItems() }
-			</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 className='historyTools'>
+				<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
+					onClick={this.toggleHistoryMenu} >
+					<i className='fas fa-clock-rotate-left' />
+					{ this.state.showHistory && this.renderHistoryItems() }
+				</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>
-			<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 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={cx('text', { selected: this.props.view === 'text' })}
-				 onClick={()=>this.props.onViewChange('text')}>
-				<i className='fa fa-beer' />
-			</div>
-			<div className={cx('style', { selected: this.props.view === 'style' })}
-				 onClick={()=>this.props.onViewChange('style')}>
-				<i className='fa fa-paint-brush' />
-			</div>
-			<div className={cx('meta', { selected: this.props.view === 'meta' })}
-				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 className='tabs'>
+				<div className={cx('text', { selected: this.props.view === 'text' })}
+					onClick={()=>this.props.onViewChange('text')}>
+					<i className='fa fa-beer' />
+				</div>
+				<div className={cx('style', { selected: this.props.view === 'style' })}
+					onClick={()=>this.props.onViewChange('style')}>
+					<i className='fa fa-paint-brush' />
+				</div>
+				<div className={cx('meta', { selected: this.props.view === 'meta' })}
+					onClick={()=>this.props.onViewChange('meta')}>
+					<i className='fas fa-info-circle' />
+				</div>
 			</div>
-			
+
 		</div>;
 	},
 
 	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'>
diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index 852a95c989..780ae7a2c1 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -5,102 +5,113 @@
 	@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;
-		top             : 0px;
-		right           : 0px;
+		display         : flex;
+		justify-content : space-between;
 	}
 
 	.editors {
 		display         : flex;
 		justify-content : space-between;
-		height          : @menuHeight;
-		
-		& > div {
-			width       : @menuHeight;
-			height      : @menuHeight;
-			line-height : @menuHeight;
-			text-align  : center;
-			cursor      : pointer;
-			&:hover,&.selected { background-color : #999999; }
-			&.text {
-				.tooltipLeft('Brew Editor');
-			}
-			&.style {
-				.tooltipLeft('Style Editor');
-			}
-			&.meta {
-				.tooltipLeft('Properties');
-			}
-			&.undo {
-				.tooltipLeft('Undo');
-				font-size : 0.75em;
-				color     : grey;
-				&.active { color : inherit; }
-			}
-			&.redo {
-				.tooltipLeft('Redo');
-				font-size : 0.75em;
-				color     : grey;
-				&.active { color : inherit; }
-			}
-			&.foldAll {
-				.tooltipLeft('Fold All');
-				font-size : 0.75em;
-				color     : inherit;
-			}
-			&.unfoldAll {
-				.tooltipLeft('Unfold All');
-				font-size : 0.75em;
-				color     : inherit;
+		>div {
+			display:flex;
+			justify-content: space-around;
+			flex:1;
+			border-left:1px solid;
+
+			&:first-child {
+				border-left: none;
 			}
-			&.history {
-				.tooltipLeft('History');
-				font-size : 0.75em;
-				color     : grey;
-				position  : relative;
-				&.active {
-					color : inherit;
+
+			& > div {
+				width       : @menuHeight;
+				height      : @menuHeight;
+				line-height : @menuHeight;
+				text-align  : center;
+				cursor      : pointer;
+				&:hover,&.selected { background-color : #999999; }
+				&.text {
+					.tooltipLeft('Brew Editor');
+				}
+				&.style {
+					.tooltipLeft('Style Editor');
+				}
+				&.meta {
+					.tooltipLeft('Properties');
+				}
+				&.undo {
+					.tooltipLeft('Undo');
+					font-size : 0.75em;
+					color     : grey;
+					&.active { color : inherit; }
+				}
+				&.redo {
+					.tooltipLeft('Redo');
+					font-size : 0.75em;
+					color     : grey;
+					&.active { color : inherit; }
+				}
+				&.foldAll {
+					.tooltipLeft('Fold All');
+					font-size : 0.75em;
+					color     : inherit;
+				}
+				&.unfoldAll {
+					.tooltipLeft('Unfold All');
+					font-size : 0.75em;
+					color     : inherit;
 				}
-				&>.dropdown{
-					right         : -1px;
-					&>.snippet{
-						padding-right : 10px;
+				&.history {
+					.tooltipLeft('History');
+					font-size : 0.75em;
+					color     : grey;
+					position  : relative;
+					border:none;
+					&.active {
+						color : inherit;
+					}
+					&>.dropdown{
+						right         : -1px;
+						&>.snippet{
+							padding-right : 10px;
+						}
 					}
 				}
-			}
-			&.editorTheme {
-				.tooltipLeft('Editor Themes');
-				font-size : 0.75em;
-				color     : black;
-				&.active {
-					position         : relative;
-					background-color : #999999;
+				&.editorTheme {
+					.tooltipLeft('Editor Themes');
+					font-size : 0.75em;
+					color     : black;
+					&.active {
+						position         : relative;
+						background-color : #999999;
+					}
+				}
+				&.divider {
+					width      : 5px;
+					background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
+					&:hover { background-color : inherit; }
 				}
 			}
-			&.divider {
-				width      : 5px;
-				background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
-				&:hover { background-color : inherit; }
+			.themeSelector {
+				position         : absolute;
+				top              : 25px;
+				right            : 0;
+				z-index          : 10;
+				display          : flex;
+				align-items      : center;
+				justify-content  : center;
+				width            : 170px;
+				height           : inherit;
+				background-color : inherit;
 			}
-		}
-		.themeSelector {
-			position         : absolute;
-			top              : 25px;
-			right            : 0;
-			z-index          : 10;
-			display          : flex;
-			align-items      : center;
-			justify-content  : center;
-			width            : 170px;
-			height           : inherit;
-			background-color : inherit;
-		}
+		}		
 	}
 	.snippetBarButton {
 		display        : inline-block;
@@ -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) {
-
-	.snippetBar {
-		display : flex;
-		flex-wrap : wrap;
-		height : 50px;
+@container editor (width < 568px) {
 
-		.snippets {
-			position : static;
-		}
+	.editors,.snippets {
+		width:332.59px;
+	}
+	.editors {
+		border-right:1px solid;
+	}
+	.snippetBar .editors>div.history>.dropdown {
+		right:unset;
 	}
-}
\ No newline at end of file
+
+}

From 1d663ef38d6ec9a2ab6222bd22eea0cb03bcba59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Sun, 20 Oct 2024 12:19:38 +0200
Subject: [PATCH 6/7] last iteration

---
 .../editor/snippetbar/snippetbar.less         | 53 +++++++------------
 1 file changed, 20 insertions(+), 33 deletions(-)

diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index 780ae7a2c1..b766e7fe17 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -4,33 +4,31 @@
 .snippetBar {
 	@menuHeight : 25px;
 	position         : relative;
+	display          : flex;
+	flex-wrap        : wrap-reverse;
+	justify-content  : space-between;
 	min-width        : 331px;
 	height           : auto;
 	color            : black;
 	background-color : #DDDDDD;
-	display: flex;
-	justify-content: space-between;
-	flex-wrap:wrap-reverse;
 
 	.snippets {
 		display         : flex;
-		justify-content : space-between;
+		justify-content : space-evenly;
 	}
 
 	.editors {
 		display         : flex;
 		justify-content : space-between;
 		>div {
-			display:flex;
-			justify-content: space-around;
-			flex:1;
-			border-left:1px solid;
+			display         : flex;
+			flex            : 1;
+			justify-content : space-around;
 
-			&:first-child {
-				border-left: none;
-			}
+			&:first-child { border-left : none; }
 
 			& > div {
+				position    : relative;
 				width       : @menuHeight;
 				height      : @menuHeight;
 				line-height : @menuHeight;
@@ -70,18 +68,14 @@
 				}
 				&.history {
 					.tooltipLeft('History');
+					position  : relative;
 					font-size : 0.75em;
 					color     : grey;
-					position  : relative;
-					border:none;
-					&.active {
-						color : inherit;
-					}
-					&>.dropdown{
+					border    : none;
+					&.active { color : inherit; }
+					& > .dropdown {
 						right         : -1px;
-						&>.snippet{
-							padding-right : 10px;
-						}
+						& > .snippet { padding-right : 10px; }
 					}
 				}
 				&.editorTheme {
@@ -121,8 +115,8 @@
 		font-weight    : 800;
 		line-height    : @menuHeight;
 		text-transform : uppercase;
+		text-wrap      : nowrap;
 		cursor         : pointer;
-		text-wrap: nowrap;
 		&:hover, &.selected { background-color : #999999; }
 		i {
 			margin-right   : 3px;
@@ -138,7 +132,6 @@
 		.tooltipLeft('Edit Brew Properties');
 	}
 	.snippetGroup {
-		border-right   : 1px solid currentColor;
 
 		&:hover {
 			& > .dropdown { visibility : visible; }
@@ -198,7 +191,7 @@
 					}
 				}
 				.name { margin-right : auto; }
-				.disabled { text-decoration: line-through; }
+				.disabled { text-decoration : line-through; }
 				.beta {
 					align-self    : center;
 					padding       : 4px 6px;
@@ -226,16 +219,10 @@
 	}
 }
 
-@container editor (width < 568px) {
+@container editor (width < 553px) {
 
-	.editors,.snippets {
-		width:332.59px;
-	}
-	.editors {
-		border-right:1px solid;
-	}
-	.snippetBar .editors>div.history>.dropdown {
-		right:unset;
-	}
+	.editors,.snippets { flex:1; }
+	.editors { border-bottom:1px solid}
+	.snippetBar .editors > div.history > .dropdown { right : unset; }
 
 }

From 0e9021049c9c50c132e88d3d545f6b61bd7fd221 Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Sun, 20 Oct 2024 13:00:05 -0400
Subject: [PATCH 7/7] lint

---
 client/homebrew/editor/snippetbar/snippetbar.less | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index b766e7fe17..a4d273bbf0 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -2,7 +2,7 @@
 @import (less) '././././themes/fonts/5e/fonts.less';
 
 .snippetBar {
-	@menuHeight : 25px;
+	@menuHeight      : 25px;
 	position         : relative;
 	display          : flex;
 	flex-wrap        : wrap-reverse;
@@ -74,7 +74,7 @@
 					border    : none;
 					&.active { color : inherit; }
 					& > .dropdown {
-						right         : -1px;
+						right : -1px;
 						& > .snippet { padding-right : 10px; }
 					}
 				}
@@ -220,9 +220,7 @@
 }
 
 @container editor (width < 553px) {
-
-	.editors,.snippets { flex:1; }
-	.editors { border-bottom:1px solid}
+	.editors,.snippets { flex : 1; }
+	.editors { border-bottom : 1px solid;}
 	.snippetBar .editors > div.history > .dropdown { right : unset; }
-
 }