Extra classes were needed for .recent and .save

.save has special styling for the "on" button.

.recent has special styling for the dividers between Edited and Viewed

client/homebrew/navbar/navbar.less

@@ -271,7 +271,8 @@
 				position         : relative;
 				box-sizing       : border-box;
 				display          : block;
-				max-height       : ~'calc(100vh - 28px)';
+				max-width        : 15em;
+				max-height       : ~'calc(100vh - 28px)';			
 				padding          : 8px 5px 13px;
 				overflow         : hidden auto;
 				color            : white;

client/homebrew/navbar/recent.navitem.jsx

@@ -165,7 +165,7 @@ const RecentItems = createClass({
 	},
 
 	render : function(){
-		return <Nav.dropdown>
+		return <Nav.dropdown className='recent'>
 			<Nav.item icon='fas fa-history' color='grey' >
 				{this.props.text}
 			</Nav.item>

client/homebrew/pages/editPage/editPage.jsx

@@ -355,7 +355,7 @@ const EditPage = createClass({
 				{this.renderGoogleDriveIcon()}
 				{this.state.error ?
 					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
-					<Nav.dropdown>
+					<Nav.dropdown className='save-menu'>
 						{this.renderSaveButton()}
 						{this.renderAutoSaveButton()}
 					</Nav.dropdown>

shared/naturalcrit/nav/nav.jsx

@@ -104,7 +104,7 @@ const Nav = {
 		});
 
 		return (
-			<div className={`navDropdownContainer ${props.className? props.className : ""}`}
+			<div className={`navDropdownContainer ${props.className ?? ''}`}
 				ref={myRef}
 				onMouseEnter = { props.trigger.includes('hover') ? ()=>handleDropdown(true)  : undefined }
 				onMouseLeave = { props.trigger.includes('hover') ? ()=>handleDropdown(false) : undefined }