restore styling to work with new structure.

Co-authored-by: Copilot <copilot@github.com>

client/components/dropdown/dropdown.jsx

@@ -48,10 +48,10 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, i
 	};
 
 	return (
-		<div className='menu-wrapper' style={{ anchorName }} role='none'>
+		<div className={['menu-wrapper', className].join(' ')} style={{ anchorName }} role='none' >
 			<button
 				id={groupName.replace(' ', '-')}
-				className={['menu-item', color, className].join(' ')}
+				className={['menu-item', color].join(' ')}
 				popoverTarget={menuId}
 				icon={icon}
 				aria-haspopup='menu'

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -336,7 +336,7 @@ const SnippetGroup = createReactClass({
 		return _.map(snippets, (snippet)=>{
 			if(!snippet.subsnippets){
 				return (
-					<div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
+					<div className='menu-item' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
 						<i className={snippet.icon} />
 						<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
 						{snippet.experimental && <span className='beta'>beta</span>}
@@ -345,7 +345,7 @@ const SnippetGroup = createReactClass({
 				);
 			} else if(snippet.subsnippets){
 				return (
-					<Dropdown groupName={snippet.name} className='dropdown side'>
+					<Dropdown groupName={snippet.name}>
 						{this.renderSnippets(snippet.subsnippets)}
 					</Dropdown>
 				)
@@ -355,8 +355,7 @@ const SnippetGroup = createReactClass({
 	},
 
 	render : function(){
-		const snippetGroup = `snippetGroup snippetBarButton ${this.props.snippets.length === 0 ? 'disabledSnippets' : ''}`;
+		return <Dropdown groupName={this.props.groupName} id={this.props.groupName} icon={this.props.icon}>
-		return <Dropdown groupName={this.props.groupName} id={this.props.groupName} icon={this.props.icon} className={snippetGroup}>
 			{this.renderSnippets(this.props.snippets)}
 		</Dropdown>;
 	},

client/homebrew/editor/snippetbar/snippetbar.less

@@ -11,6 +11,10 @@
 	height           : auto;
 	color            : black;
 	background-color : #DDDDDD;
+	font-size        : .65rem;
+	font-family: 'Open Sans', sans-serif;
+	text-transform: uppercase;
+	font-weight: 800;
 
 	.snippets {
 		display         : flex;
@@ -22,7 +26,7 @@
 		display         : flex;
 		justify-content : flex-end;
 		min-width       : 250px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
-
+		font-size: .85rem;
 		&:only-child {min-width   : unset; margin-left : auto;}
 
 		>div {
@@ -57,32 +61,27 @@
 				}
 				&.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     : grey;
 					&.active { color : inherit; }
 				}
 				&.unfoldAll {
 					.tooltipLeft('Unfold All');
-					font-size : 0.75em;
 					color     : grey;
 					&.active { color : inherit; }
 				}
 				&.history {
 					.tooltipLeft('History');
 					position  : relative;
-					font-size : 0.75em;
 					color     : grey;
 					border    : none;
 					&.active { color : inherit; }
@@ -93,7 +92,6 @@
 				}
 				&.editorTheme {
 					.tooltipLeft('Editor Themes');
-					font-size : 0.75em;
 					color     : inherit;
 					&.active {
 						position         : relative;
@@ -144,27 +142,25 @@
 		border-left : 1px solid black;
 		.tooltipLeft('Edit Brew Properties');
 	}
-	.snippetGroup {
 
-		&:hover {
+	
-			& > .dropdown { visibility : visible; }
+	.menu-wrapper {
-		}
+		.menu-list {
-		.dropdown {
-			position         : absolute;
-			top              : 100%;
-			z-index          : 1000;
-			visibility       : hidden;
 			padding          : 0px;
-			margin-left      : -5px;
 			background-color : #DDDDDD;
-			.snippet {
+			
+		}
+	}
+
+	.menu-item {
 		position    : relative;
 		display     : flex;
+		justify-content: space-between;
 		align-items : center;
 		min-width   : max-content;
 		padding     : 5px;
-				font-size   : 10px;
 		cursor      : pointer;
+		width: 100%;
 		.animate(background-color);
 		i {
 			min-width    : 25px;
@@ -172,6 +168,12 @@
 			margin-right : 8px;
 			font-size    : 1.2em;
 			text-align   : center;
+			&.caret {
+				margin-right: 0;
+			}
+			&.caret:is(.menu-wrapper .menu-wrapper * ) {
+				text-align: right;
+			}
 			& ~ i {
 				margin-right : 0;
 				margin-left  : 5px;
@@ -217,17 +219,6 @@
 		}
 		&:hover {
 			background-color : #999999;
-					& > .dropdown {
-						visibility : visible;
-						&.side {
-							top         : 0%;
-							left        : 100%;
-							margin-left : 0;
-							box-shadow  : -1px 1px 2px 0px #999999;
-						}
-					}
-				}
-			}
 		}
 	}
 	.disabledSnippets {