From ccf44cbe91529f36222b6847e98b572475cda4d9 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Tue, 14 Mar 2023 23:01:29 +1300
Subject: [PATCH 01/30] Initial functionality pass

---
 client/homebrew/navbar/metadata.navitem.jsx   | 71 +++++++++++++++++++
 client/homebrew/navbar/navbar.less            | 29 ++++++++
 client/homebrew/pages/sharePage/sharePage.jsx |  2 +
 3 files changed, 102 insertions(+)
 create mode 100644 client/homebrew/navbar/metadata.navitem.jsx

diff --git a/client/homebrew/navbar/metadata.navitem.jsx b/client/homebrew/navbar/metadata.navitem.jsx
new file mode 100644
index 000000000..cfbbcbabe
--- /dev/null
+++ b/client/homebrew/navbar/metadata.navitem.jsx
@@ -0,0 +1,71 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+
+const MetadataNav = createClass({
+	DisplayName     : 'MetadataNav',
+	getDefaultProps : function() {
+		return {
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			showDropdown : false
+		};
+	},
+
+	componentDidMount : function() {
+	},
+
+	handleDropdown : function(show){
+		this.setState({
+			showDropdown : show
+		});
+	},
+
+	getAuthors : function(){
+		if(!this.props.brew.authors) return 'No authors';
+		return this.props.brew.authors.join(', ');
+	},
+
+	getTags : function(){
+		if(!this.props.brew.tags) return 'No tags';
+		return this.props.brew.tags.join(', ');
+	},
+
+	getSystems : function(){
+		if(!this.props.brew.systems) return 'No systems';
+		return this.props.brew.systems.join(', ');
+	},
+
+	renderDropdown : function(){
+		if(!this.state.showDropdown) return null;
+
+		return <div className='dropdown'>
+			<h4>Description</h4>
+			<p>{this.props.brew.description || 'No description.'}</p>
+			<h4>Authors</h4>
+			<p>{this.getAuthors()}</p>
+			<h4>Tags</h4>
+			<p>{this.getTags()}</p>
+			<h4>Systems</h4>
+			<p>{this.getSystems()}</p>
+		</div>;
+	},
+
+	render : function(){
+		return <Nav.item icon='fas fa-info-circle' color='grey' className='metadata'
+			onMouseEnter={()=>this.handleDropdown(true)}
+			onMouseLeave={()=>this.handleDropdown(false)}>
+			METADATA
+			{this.renderDropdown()}
+		</Nav.item>;
+	}
+
+});
+
+module.exports = MetadataNav;
diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 3bd6a66e1..a4eb570f9 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -163,6 +163,35 @@
 			}
 		}
 	}
+	.metadata.navItem {
+		position : relative;
+		.dropdown{
+			position   : absolute;
+			top        : 28px;
+			left       : 0px;
+			z-index    : 10000;
+			width      : 350px;
+			max-height : ~"calc(100vh - 28px)";
+			background-color : #333;
+			h4{
+				display          : block;
+				box-sizing       : border-box;
+				padding          : 5px 0px;
+				font-size        : 0.8em;
+				color            : #bbb;
+				text-align       : center;
+				border           : 1px solid #888;
+				border-left      : 0px;
+				border-right     : 0px;
+			}
+			p{
+				font-family      : 'Open Sans', sans-serif;
+				font-size        : 12px;
+				font-weight      : normal;
+				text-transform 	 : initial;
+			}
+		}
+	}
 	.warning.navItem{
 		position         : relative;
 		background-color : @orange;
diff --git a/client/homebrew/pages/sharePage/sharePage.jsx b/client/homebrew/pages/sharePage/sharePage.jsx
index 232c2a1e3..a772197fb 100644
--- a/client/homebrew/pages/sharePage/sharePage.jsx
+++ b/client/homebrew/pages/sharePage/sharePage.jsx
@@ -5,6 +5,7 @@ const { Meta } = require('vitreum/headtags');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
+const MetadataNav = require('../../navbar/metadata.navitem.jsx');
 const PrintLink = require('../../navbar/print.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const Account = require('../../navbar/account.navitem.jsx');
@@ -55,6 +56,7 @@ const SharePage = createClass({
 				</Nav.section>
 
 				<Nav.section>
+					<MetadataNav brew={this.props.brew} />
 					{this.props.brew.shareId && <>
 						<PrintLink shareId={this.processShareId()} />
 						<Nav.dropdown>

From 24564a27509028c664cb06e6c873d20593217a19 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Wed, 15 Mar 2023 09:17:05 +1300
Subject: [PATCH 02/30] Shift to title wrapper

---
 client/homebrew/navbar/metadata.navitem.jsx   | 21 +++++++++----------
 client/homebrew/navbar/navbar.less            | 12 +++++++++--
 client/homebrew/pages/sharePage/sharePage.jsx |  7 ++++---
 .../homebrew/pages/sharePage/sharePage.less   |  4 ++++
 shared/naturalcrit/nav/nav.jsx                |  2 +-
 shared/naturalcrit/nav/nav.less               |  2 +-
 6 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/client/homebrew/navbar/metadata.navitem.jsx b/client/homebrew/navbar/metadata.navitem.jsx
index cfbbcbabe..09672c632 100644
--- a/client/homebrew/navbar/metadata.navitem.jsx
+++ b/client/homebrew/navbar/metadata.navitem.jsx
@@ -14,17 +14,17 @@ const MetadataNav = createClass({
 
 	getInitialState : function() {
 		return {
-			showDropdown : false
+			showMetaWindow : false
 		};
 	},
 
 	componentDidMount : function() {
 	},
 
-	handleDropdown : function(show){
-		this.setState({
-			showDropdown : show
-		});
+	toggleMetaWindow : function(){
+		this.setState((prevProps)=>({
+			showMetaWindow : !prevProps.showMetaWindow
+		}));
 	},
 
 	getAuthors : function(){
@@ -42,8 +42,8 @@ const MetadataNav = createClass({
 		return this.props.brew.systems.join(', ');
 	},
 
-	renderDropdown : function(){
-		if(!this.state.showDropdown) return null;
+	renderMetaWindow : function(){
+		if(!this.state.showMetaWindow) return null;
 
 		return <div className='dropdown'>
 			<h4>Description</h4>
@@ -59,10 +59,9 @@ const MetadataNav = createClass({
 
 	render : function(){
 		return <Nav.item icon='fas fa-info-circle' color='grey' className='metadata'
-			onMouseEnter={()=>this.handleDropdown(true)}
-			onMouseLeave={()=>this.handleDropdown(false)}>
-			METADATA
-			{this.renderDropdown()}
+			onClick={()=>this.toggleMetaWindow()}>
+			{this.props.children}
+			{this.renderMetaWindow()}
 		</Nav.item>;
 	}
 
diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index a4eb570f9..3aace3fbc 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -28,7 +28,7 @@
 			width            : 250px;
 			margin           : 0;
 			padding          : 2px;
-			background-color : #444;
+			background-color : transparent;
 			font-family      : 'Open Sans', sans-serif;
 			font-size        : 12px;
 			font-weight      : 800;
@@ -54,6 +54,7 @@
 		color          : white;
 		text-align     : center;
 		text-transform : initial;
+		flex-grow      : 1;
 	}
 	.save-menu {
 		.dropdown {
@@ -165,12 +166,19 @@
 	}
 	.metadata.navItem {
 		position : relative;
+		padding: 0;
+		align-items: center;
+		display  : flex;
+		flex-grow: 1;
+		i{
+			margin-right: 10px;
+		}
 		.dropdown{
 			position   : absolute;
 			top        : 28px;
 			left       : 0px;
 			z-index    : 10000;
-			width      : 350px;
+			width      : 100%;
 			max-height : ~"calc(100vh - 28px)";
 			background-color : #333;
 			h4{
diff --git a/client/homebrew/pages/sharePage/sharePage.jsx b/client/homebrew/pages/sharePage/sharePage.jsx
index a772197fb..8f67fda80 100644
--- a/client/homebrew/pages/sharePage/sharePage.jsx
+++ b/client/homebrew/pages/sharePage/sharePage.jsx
@@ -51,12 +51,13 @@ const SharePage = createClass({
 		return <div className='sharePage sitePage'>
 			<Meta name='robots' content='noindex, nofollow' />
 			<Navbar>
-				<Nav.section>
-					<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
+				<Nav.section classes='titleSection'>
+					<MetadataNav brew={this.props.brew}>
+						<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
+					</MetadataNav>
 				</Nav.section>
 
 				<Nav.section>
-					<MetadataNav brew={this.props.brew} />
 					{this.props.brew.shareId && <>
 						<PrintLink shareId={this.processShareId()} />
 						<Nav.dropdown>
diff --git a/client/homebrew/pages/sharePage/sharePage.less b/client/homebrew/pages/sharePage/sharePage.less
index 40b90496a..83e784c49 100644
--- a/client/homebrew/pages/sharePage/sharePage.less
+++ b/client/homebrew/pages/sharePage/sharePage.less
@@ -1,4 +1,8 @@
 .sharePage{
+	.navContent .navSection.titleSection {
+		flex-grow: 1;
+		justify-content: center;
+	}
 	.content{
 		overflow-y : hidden;
 	}
diff --git a/shared/naturalcrit/nav/nav.jsx b/shared/naturalcrit/nav/nav.jsx
index ef7d387e9..3272e5968 100644
--- a/shared/naturalcrit/nav/nav.jsx
+++ b/shared/naturalcrit/nav/nav.jsx
@@ -29,7 +29,7 @@ const Nav = {
 	section : createClass({
 		displayName : 'Nav.section',
 		render      : function(){
-			return <div className='navSection'>
+			return <div className={this.props.classes ? `navSection ${this.props.classes}` : 'navSection'}>
 				{this.props.children}
 			</div>;
 		}
diff --git a/shared/naturalcrit/nav/nav.less b/shared/naturalcrit/nav/nav.less
index 43eaa0819..697ab2cd9 100644
--- a/shared/naturalcrit/nav/nav.less
+++ b/shared/naturalcrit/nav/nav.less
@@ -54,7 +54,7 @@ nav{
 		.animate(background-color);
 		padding          : 8px 12px;
 		cursor           : pointer;
-		background-color : #333;
+		// background-color : #333;
 		font-size        : 10px;
 		font-weight      : 800;
 		color            : white;

From a3f93c26021e4c5045ba9dcab7ad4aebd4ee565f Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Wed, 15 Mar 2023 11:06:48 +1300
Subject: [PATCH 03/30] Styling updates

---
 client/homebrew/navbar/navbar.less | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 3aace3fbc..5fb600d52 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -181,22 +181,29 @@
 			width      : 100%;
 			max-height : ~"calc(100vh - 28px)";
 			background-color : #333;
+    	    display: flex;
+			flex-flow: row wrap;
+			justify-content: flex-start;
+			align-content: baseline;
+			padding: 0px 10px;
+			border-radius: 5px;
 			h4{
-				display          : block;
-				box-sizing       : border-box;
-				padding          : 5px 0px;
-				font-size        : 0.8em;
-				color            : #bbb;
-				text-align       : center;
-				border           : 1px solid #888;
-				border-left      : 0px;
-				border-right     : 0px;
+				display: block;
+				box-sizing: border-box;
+				padding: 5px 0px;
+				color: #bbb;
+				text-align: center;
+				border-top: 1px solid #888;
+				flex-basis: 20%;
 			}
 			p{
 				font-family      : 'Open Sans', sans-serif;
-				font-size        : 12px;
+				font-size        : 10px;
 				font-weight      : normal;
 				text-transform 	 : initial;
+				padding: 5px 0;
+				flex-basis: 80%;
+				border-top: 1px solid #888;
 			}
 		}
 	}

From 1126481d5392c6c4ee088050eea460ea0dc67b1b Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Wed, 15 Mar 2023 11:46:27 +1300
Subject: [PATCH 04/30] Add Last Updated field and nudge styling

---
 client/homebrew/navbar/metadata.navitem.jsx    | 3 +++
 client/homebrew/navbar/navbar.less             | 6 +++---
 client/homebrew/pages/sharePage/sharePage.less | 1 +
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/homebrew/navbar/metadata.navitem.jsx b/client/homebrew/navbar/metadata.navitem.jsx
index 09672c632..e64bdfb3f 100644
--- a/client/homebrew/navbar/metadata.navitem.jsx
+++ b/client/homebrew/navbar/metadata.navitem.jsx
@@ -1,6 +1,7 @@
 const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
+const Moment = require('moment');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 
@@ -54,6 +55,8 @@ const MetadataNav = createClass({
 			<p>{this.getTags()}</p>
 			<h4>Systems</h4>
 			<p>{this.getSystems()}</p>
+			<h4>Last Updated</h4>
+			<p>{Moment(this.props.brew.updatedAt).fromNow()}</p>
 		</div>;
 	},
 
diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 5fb600d52..2525491b9 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -175,9 +175,9 @@
 		}
 		.dropdown{
 			position   : absolute;
-			top        : 28px;
+			top        : 18px;
 			left       : 0px;
-			z-index    : 10000;
+			z-index    : -1;
 			width      : 100%;
 			max-height : ~"calc(100vh - 28px)";
 			background-color : #333;
@@ -185,7 +185,7 @@
 			flex-flow: row wrap;
 			justify-content: flex-start;
 			align-content: baseline;
-			padding: 0px 10px;
+			padding: 10px 10px 0px;
 			border-radius: 5px;
 			h4{
 				display: block;
diff --git a/client/homebrew/pages/sharePage/sharePage.less b/client/homebrew/pages/sharePage/sharePage.less
index 83e784c49..792bec360 100644
--- a/client/homebrew/pages/sharePage/sharePage.less
+++ b/client/homebrew/pages/sharePage/sharePage.less
@@ -2,6 +2,7 @@
 	.navContent .navSection.titleSection {
 		flex-grow: 1;
 		justify-content: center;
+		z-index: 2;
 	}
 	.content{
 		overflow-y : hidden;

From bd4c24df46506ddd41163849b2546108e3c61850 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Wed, 15 Mar 2023 13:46:30 +1300
Subject: [PATCH 05/30] Adjust styling for unusual browser widths

---
 client/homebrew/navbar/metadata.navitem.jsx | 30 ++++++++++-----
 client/homebrew/navbar/navbar.less          | 41 ++++++++++++---------
 2 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/client/homebrew/navbar/metadata.navitem.jsx b/client/homebrew/navbar/metadata.navitem.jsx
index e64bdfb3f..9f25f1a0f 100644
--- a/client/homebrew/navbar/metadata.navitem.jsx
+++ b/client/homebrew/navbar/metadata.navitem.jsx
@@ -47,16 +47,26 @@ const MetadataNav = createClass({
 		if(!this.state.showMetaWindow) return null;
 
 		return <div className='dropdown'>
-			<h4>Description</h4>
-			<p>{this.props.brew.description || 'No description.'}</p>
-			<h4>Authors</h4>
-			<p>{this.getAuthors()}</p>
-			<h4>Tags</h4>
-			<p>{this.getTags()}</p>
-			<h4>Systems</h4>
-			<p>{this.getSystems()}</p>
-			<h4>Last Updated</h4>
-			<p>{Moment(this.props.brew.updatedAt).fromNow()}</p>
+			<div className='row'>
+				<h4>Description</h4>
+				<p>{this.props.brew.description || 'No description.'}</p>
+			</div>
+			<div className='row'>
+				<h4>Authors</h4>
+				<p>{this.getAuthors()}</p>
+			</div>
+			<div className='row'>
+				<h4>Tags</h4>
+				<p>{this.getTags()}</p>
+			</div>
+			<div className='row'>
+				<h4>Systems</h4>
+				<p>{this.getSystems()}</p>
+			</div>
+			<div className='row'>
+				<h4>Last Updated</h4>
+				<p>{Moment(this.props.brew.updatedAt).fromNow()}</p>
+			</div>
 		</div>;
 	},
 
diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 2525491b9..036c8f574 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -187,23 +187,30 @@
 			align-content: baseline;
 			padding: 10px 10px 0px;
 			border-radius: 5px;
-			h4{
-				display: block;
-				box-sizing: border-box;
-				padding: 5px 0px;
-				color: #bbb;
-				text-align: center;
-				border-top: 1px solid #888;
-				flex-basis: 20%;
-			}
-			p{
-				font-family      : 'Open Sans', sans-serif;
-				font-size        : 10px;
-				font-weight      : normal;
-				text-transform 	 : initial;
-				padding: 5px 0;
-				flex-basis: 80%;
-				border-top: 1px solid #888;
+			.row{
+				display   : flex;
+				flex-flow : row wrap;
+				width     : 100%;
+				h4{
+					display          : block;
+					box-sizing       : border-box;
+					padding          : 5px 0px;
+					color            : #bbb;
+					text-align       : center;
+					border-top       : 1px solid #888;
+					flex-basis       : 20%;
+					flex-grow        : 1;
+				}
+				p{
+					font-family      : 'Open Sans', sans-serif;
+					font-size        : 10px;
+					font-weight      : normal;
+					text-transform 	 : initial;
+					padding          : 5px 0;
+					flex-basis       : 80%;
+					flex-grow        : 1;
+					border-top       : 1px solid #888;
+				}
 			}
 		}
 	}

From 807ab2a538475cff7b82344e55274451913c5198 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sun, 19 Mar 2023 18:40:38 +1300
Subject: [PATCH 06/30] Standardize to className

---
 client/homebrew/pages/sharePage/sharePage.jsx | 2 +-
 shared/naturalcrit/nav/nav.jsx                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/homebrew/pages/sharePage/sharePage.jsx b/client/homebrew/pages/sharePage/sharePage.jsx
index 8f67fda80..981ad0126 100644
--- a/client/homebrew/pages/sharePage/sharePage.jsx
+++ b/client/homebrew/pages/sharePage/sharePage.jsx
@@ -51,7 +51,7 @@ const SharePage = createClass({
 		return <div className='sharePage sitePage'>
 			<Meta name='robots' content='noindex, nofollow' />
 			<Navbar>
-				<Nav.section classes='titleSection'>
+				<Nav.section className='titleSection'>
 					<MetadataNav brew={this.props.brew}>
 						<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
 					</MetadataNav>
diff --git a/shared/naturalcrit/nav/nav.jsx b/shared/naturalcrit/nav/nav.jsx
index 3272e5968..7a8b9cda9 100644
--- a/shared/naturalcrit/nav/nav.jsx
+++ b/shared/naturalcrit/nav/nav.jsx
@@ -29,7 +29,7 @@ const Nav = {
 	section : createClass({
 		displayName : 'Nav.section',
 		render      : function(){
-			return <div className={this.props.classes ? `navSection ${this.props.classes}` : 'navSection'}>
+			return <div className={this.props.className ? `navSection ${this.props.className}` : 'navSection'}>
 				{this.props.children}
 			</div>;
 		}

From db5469699e68435c2cf5b1e1496a9f73f07a0a8a Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sun, 19 Mar 2023 18:42:31 +1300
Subject: [PATCH 07/30] Move metadata window to be independent of title

---
 client/homebrew/navbar/metadata.navitem.jsx | 42 ++++++-----
 client/homebrew/navbar/navbar.less          | 81 +++++++++++----------
 2 files changed, 66 insertions(+), 57 deletions(-)

diff --git a/client/homebrew/navbar/metadata.navitem.jsx b/client/homebrew/navbar/metadata.navitem.jsx
index 9f25f1a0f..9f56e89e3 100644
--- a/client/homebrew/navbar/metadata.navitem.jsx
+++ b/client/homebrew/navbar/metadata.navitem.jsx
@@ -46,26 +46,28 @@ const MetadataNav = createClass({
 	renderMetaWindow : function(){
 		if(!this.state.showMetaWindow) return null;
 
-		return <div className='dropdown'>
-			<div className='row'>
-				<h4>Description</h4>
-				<p>{this.props.brew.description || 'No description.'}</p>
-			</div>
-			<div className='row'>
-				<h4>Authors</h4>
-				<p>{this.getAuthors()}</p>
-			</div>
-			<div className='row'>
-				<h4>Tags</h4>
-				<p>{this.getTags()}</p>
-			</div>
-			<div className='row'>
-				<h4>Systems</h4>
-				<p>{this.getSystems()}</p>
-			</div>
-			<div className='row'>
-				<h4>Last Updated</h4>
-				<p>{Moment(this.props.brew.updatedAt).fromNow()}</p>
+		return <div className='windowWrapper'>
+			<div className='window'>
+				<div className='row'>
+					<h4>Description</h4>
+					<p>{this.props.brew.description || 'No description.'}</p>
+				</div>
+				<div className='row'>
+					<h4>Authors</h4>
+					<p>{this.getAuthors()}</p>
+				</div>
+				<div className='row'>
+					<h4>Tags</h4>
+					<p>{this.getTags()}</p>
+				</div>
+				<div className='row'>
+					<h4>Systems</h4>
+					<p>{this.getSystems()}</p>
+				</div>
+				<div className='row'>
+					<h4>Last Updated</h4>
+					<p>{Moment(this.props.brew.updatedAt).fromNow()}</p>
+				</div>
 			</div>
 		</div>;
 	},
diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 036c8f574..85dc55732 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -173,43 +173,50 @@
 		i{
 			margin-right: 10px;
 		}
-		.dropdown{
-			position   : absolute;
-			top        : 18px;
-			left       : 0px;
-			z-index    : -1;
-			width      : 100%;
-			max-height : ~"calc(100vh - 28px)";
-			background-color : #333;
-    	    display: flex;
-			flex-flow: row wrap;
-			justify-content: flex-start;
-			align-content: baseline;
-			padding: 10px 10px 0px;
-			border-radius: 5px;
-			.row{
-				display   : flex;
-				flex-flow : row wrap;
-				width     : 100%;
-				h4{
-					display          : block;
-					box-sizing       : border-box;
-					padding          : 5px 0px;
-					color            : #bbb;
-					text-align       : center;
-					border-top       : 1px solid #888;
-					flex-basis       : 20%;
-					flex-grow        : 1;
-				}
-				p{
-					font-family      : 'Open Sans', sans-serif;
-					font-size        : 10px;
-					font-weight      : normal;
-					text-transform 	 : initial;
-					padding          : 5px 0;
-					flex-basis       : 80%;
-					flex-grow        : 1;
-					border-top       : 1px solid #888;
+		.windowWrapper{
+			position: fixed;
+			top: 18px;
+			left: 0px;
+			width: calc(100vw - 30px);
+			z-index: -1;
+			.window{
+				max-width : 764px;
+				width     : 80%;
+				min-width : 380px;
+				max-height : ~"calc(100vh - 28px)";
+				background-color : #333;
+				display: flex;
+				flex-flow: row wrap;
+				justify-content: flex-start;
+				align-content: baseline;
+				padding: 10px 10px 0px;
+				border-radius: 5px;
+				margin: 0 auto;
+				.row{
+					display   : flex;
+					flex-flow : row wrap;
+					width     : 100%;
+					h4{
+						display          : block;
+						box-sizing       : border-box;
+						padding          : 5px 0px;
+						color            : #bbb;
+						text-align       : center;
+						border-top       : 1px solid #888;
+						flex-basis       : 20%;
+						flex-grow        : 1;
+						min-width        : 76px;
+					}
+					p{
+						font-family      : 'Open Sans', sans-serif;
+						font-size        : 10px;
+						font-weight      : normal;
+						text-transform 	 : initial;
+						padding          : 5px 0;
+						flex-basis       : 80%;
+						flex-grow        : 1;
+						border-top       : 1px solid #888;
+					}
 				}
 			}
 		}

From aed29952d6a226fd0e2caa912eb453bf99158ebd Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Thu, 30 Mar 2023 20:13:01 +1300
Subject: [PATCH 08/30] Fix nav item background transparency & z position

---
 client/homebrew/navbar/navbar.less | 1 +
 shared/naturalcrit/nav/nav.less    | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index a1c3b2d81..138a4510c 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -55,6 +55,7 @@
 		text-align     : center;
 		text-transform : initial;
 		flex-grow      : 1;
+		background-color: transparent;
 	}
 	.save-menu {
 		.dropdown {
diff --git a/shared/naturalcrit/nav/nav.less b/shared/naturalcrit/nav/nav.less
index 697ab2cd9..e085822b6 100644
--- a/shared/naturalcrit/nav/nav.less
+++ b/shared/naturalcrit/nav/nav.less
@@ -54,7 +54,7 @@ nav{
 		.animate(background-color);
 		padding          : 8px 12px;
 		cursor           : pointer;
-		// background-color : #333;
+		background-color : #333;
 		font-size        : 10px;
 		font-weight      : 800;
 		color            : white;
@@ -72,6 +72,7 @@ nav{
 	}
 	.navDropdownContainer{
 		position: relative;
+		z-index: 2;
 		.navDropdown {
 			position : absolute;
 			top      : 28px;

From 591c45f59f9fb2c946c881c385effe4942e50413 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Thu, 30 Mar 2023 20:19:30 +1300
Subject: [PATCH 09/30] Fix Recent Items drop down

---
 client/homebrew/navbar/navbar.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 138a4510c..b24e43d48 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -84,6 +84,7 @@
 	}
 	.recent.navItem {
 		position : relative;
+		z-index  : 2;
 		.dropdown{
 			position   : absolute;
 			top        : 28px;

From 2cb6acc09073b5687958e6ab91b326257d0e55cb Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Tue, 4 Apr 2023 23:41:44 -0400
Subject: [PATCH 10/30] Small refactor to fix broken error popup

---
 client/homebrew/navbar/error-navitem.jsx    |   2 +-
 client/homebrew/navbar/error-navitem.less   | 144 ++++++++++----------
 client/homebrew/pages/editPage/editPage.jsx |  19 ++-
 3 files changed, 81 insertions(+), 84 deletions(-)

diff --git a/client/homebrew/navbar/error-navitem.jsx b/client/homebrew/navbar/error-navitem.jsx
index efee04019..eb2872c22 100644
--- a/client/homebrew/navbar/error-navitem.jsx
+++ b/client/homebrew/navbar/error-navitem.jsx
@@ -82,4 +82,4 @@ const ErrorNavItem = createClass({
 	}
 });
 
-module.exports = ErrorNavItem;
\ No newline at end of file
+module.exports = ErrorNavItem;
diff --git a/client/homebrew/navbar/error-navitem.less b/client/homebrew/navbar/error-navitem.less
index 8a7cabb19..7e7dab772 100644
--- a/client/homebrew/navbar/error-navitem.less
+++ b/client/homebrew/navbar/error-navitem.less
@@ -1,77 +1,75 @@
-.navItem {
-  &.error {
-    position         : relative;
-    background-color : @red;
-  }
+.navItem.error {
+  position         : relative;
+  background-color : @red;
+}
 
-  .errorContainer{
-    animation-name: glideDown;
-    animation-duration: 0.4s;
-    position         : absolute;
-    top              : 100%;
-    left             : 50%;
-    z-index          : 1000;
-    width            : 140px;
-    padding          : 3px;
-    color            : white;
+.errorContainer{
+  animation-name: glideDown;
+  animation-duration: 0.4s;
+  position         : absolute;
+  top              : 100%;
+  left             : 50%;
+  z-index          : 1000;
+  width            : 140px;
+  padding          : 3px;
+  color            : white;
+  background-color : #333;
+  border           : 3px solid #444;
+  border-radius    : 5px;
+  transform        : translate(-50% + 3px, 10px);
+  text-align       : center;
+  font-size        : 10px;
+  font-weight      : 800;
+  text-transform   : uppercase;
+  a{
+    color : @teal;
+  }
+  &:before {
+    content: "";
+    width: 0px;
+    height: 0px;
+    position: absolute;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid #444;
+    left: 53px;
+    top: -23px;
+  }
+  &:after {
+    content: "";
+    width: 0px;
+    height: 0px;
+    position: absolute;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid #333;
+    left: 53px;
+    top: -19px;
+  }
+  .deny {
+    width            : 48%;
+    margin           : 1px;
+    padding          : 5px;
     background-color : #333;
-    border           : 3px solid #444;
-    border-radius    : 5px;
-    transform        : translate(-50% + 3px, 10px);
-    text-align       : center;
-    font-size        : 10px;
-    font-weight      : 800;
-    text-transform   : uppercase;
-    a{
-      color : @teal;
-    }
-    &:before {
-      content: "";
-      width: 0px;
-      height: 0px;
-      position: absolute;
-      border-left: 10px solid transparent;
-      border-right: 10px solid transparent;
-      border-top: 10px solid transparent;
-      border-bottom: 10px solid #444;
-      left: 53px;
-      top: -23px;
-    }
-    &:after {
-      content: "";
-      width: 0px;
-      height: 0px;
-      position: absolute;
-      border-left: 10px solid transparent;
-      border-right: 10px solid transparent;
-      border-top: 10px solid transparent;
-      border-bottom: 10px solid #333;
-      left: 53px;
-      top: -19px;
-    }
-    .deny {
-      width            : 48%;
-      margin           : 1px;
-      padding          : 5px;
-      background-color : #333;
-      display          : inline-block;
-      border-left      : 1px solid #666;
-      .animate(background-color);
-      &:hover{
-        background-color : red;
-      }
-    }
-    .confirm {
-      width            : 48%;
-      margin           : 1px;
-      padding          : 5px;
-      background-color : #333;
-      display          : inline-block;
-      color            : white;
-      .animate(background-color);
-      &:hover{
-        background-color : teal;
-      }
+    display          : inline-block;
+    border-left      : 1px solid #666;
+    .animate(background-color);
+    &:hover{
+      background-color : red;
     }
   }
-}
\ No newline at end of file
+  .confirm {
+    width            : 48%;
+    margin           : 1px;
+    padding          : 5px;
+    background-color : #333;
+    display          : inline-block;
+    color            : white;
+    .animate(background-color);
+    &:hover{
+      background-color : teal;
+    }
+  }
+}
diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx
index 94d5aef3b..4f2e8f8a2 100644
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -254,6 +254,15 @@ const EditPage = createClass({
 					</div>
 				</div>
 			}
+
+			{this.state.alertTrashedGoogleBrew &&
+				<div className='errorContainer' onClick={this.closeAlerts}>
+				This brew is currently in your Trash folder on Google Drive!<br />If you want to keep it, make sure to move it before it is deleted permanently!<br />
+					<div className='confirm'>
+						OK
+					</div>
+				</div>
+			}
 		</Nav.item>;
 	},
 
@@ -335,16 +344,6 @@ const EditPage = createClass({
 		const shareLink = this.processShareId();
 
 		return <Navbar>
-
-			{this.state.alertTrashedGoogleBrew &&
-				<div className='errorContainer' onClick={this.closeAlerts}>
-				This brew is currently in your Trash folder on Google Drive!<br />If you want to keep it, make sure to move it before it is deleted permanently!<br />
-					<div className='confirm'>
-						OK
-					</div>
-				</div>
-			}
-
 			<Nav.section>
 				<Nav.item className='brewTitle'>{this.state.brew.title}</Nav.item>
 			</Nav.section>

From 70295fb227863872e76371b629ae42fe32c7c479 Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Tue, 4 Apr 2023 23:44:23 -0400
Subject: [PATCH 11/30] Revert "Small refactor to fix broken error popup"

This reverts commit 2cb6acc09073b5687958e6ab91b326257d0e55cb.
---
 client/homebrew/navbar/error-navitem.jsx    |   2 +-
 client/homebrew/navbar/error-navitem.less   | 144 ++++++++++----------
 client/homebrew/pages/editPage/editPage.jsx |  19 +--
 3 files changed, 84 insertions(+), 81 deletions(-)

diff --git a/client/homebrew/navbar/error-navitem.jsx b/client/homebrew/navbar/error-navitem.jsx
index eb2872c22..efee04019 100644
--- a/client/homebrew/navbar/error-navitem.jsx
+++ b/client/homebrew/navbar/error-navitem.jsx
@@ -82,4 +82,4 @@ const ErrorNavItem = createClass({
 	}
 });
 
-module.exports = ErrorNavItem;
+module.exports = ErrorNavItem;
\ No newline at end of file
diff --git a/client/homebrew/navbar/error-navitem.less b/client/homebrew/navbar/error-navitem.less
index 7e7dab772..8a7cabb19 100644
--- a/client/homebrew/navbar/error-navitem.less
+++ b/client/homebrew/navbar/error-navitem.less
@@ -1,75 +1,77 @@
-.navItem.error {
-  position         : relative;
-  background-color : @red;
-}
+.navItem {
+  &.error {
+    position         : relative;
+    background-color : @red;
+  }
 
-.errorContainer{
-  animation-name: glideDown;
-  animation-duration: 0.4s;
-  position         : absolute;
-  top              : 100%;
-  left             : 50%;
-  z-index          : 1000;
-  width            : 140px;
-  padding          : 3px;
-  color            : white;
-  background-color : #333;
-  border           : 3px solid #444;
-  border-radius    : 5px;
-  transform        : translate(-50% + 3px, 10px);
-  text-align       : center;
-  font-size        : 10px;
-  font-weight      : 800;
-  text-transform   : uppercase;
-  a{
-    color : @teal;
-  }
-  &:before {
-    content: "";
-    width: 0px;
-    height: 0px;
-    position: absolute;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-top: 10px solid transparent;
-    border-bottom: 10px solid #444;
-    left: 53px;
-    top: -23px;
-  }
-  &:after {
-    content: "";
-    width: 0px;
-    height: 0px;
-    position: absolute;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-top: 10px solid transparent;
-    border-bottom: 10px solid #333;
-    left: 53px;
-    top: -19px;
-  }
-  .deny {
-    width            : 48%;
-    margin           : 1px;
-    padding          : 5px;
-    background-color : #333;
-    display          : inline-block;
-    border-left      : 1px solid #666;
-    .animate(background-color);
-    &:hover{
-      background-color : red;
-    }
-  }
-  .confirm {
-    width            : 48%;
-    margin           : 1px;
-    padding          : 5px;
-    background-color : #333;
-    display          : inline-block;
+  .errorContainer{
+    animation-name: glideDown;
+    animation-duration: 0.4s;
+    position         : absolute;
+    top              : 100%;
+    left             : 50%;
+    z-index          : 1000;
+    width            : 140px;
+    padding          : 3px;
     color            : white;
-    .animate(background-color);
-    &:hover{
-      background-color : teal;
+    background-color : #333;
+    border           : 3px solid #444;
+    border-radius    : 5px;
+    transform        : translate(-50% + 3px, 10px);
+    text-align       : center;
+    font-size        : 10px;
+    font-weight      : 800;
+    text-transform   : uppercase;
+    a{
+      color : @teal;
+    }
+    &:before {
+      content: "";
+      width: 0px;
+      height: 0px;
+      position: absolute;
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-top: 10px solid transparent;
+      border-bottom: 10px solid #444;
+      left: 53px;
+      top: -23px;
+    }
+    &:after {
+      content: "";
+      width: 0px;
+      height: 0px;
+      position: absolute;
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-top: 10px solid transparent;
+      border-bottom: 10px solid #333;
+      left: 53px;
+      top: -19px;
+    }
+    .deny {
+      width            : 48%;
+      margin           : 1px;
+      padding          : 5px;
+      background-color : #333;
+      display          : inline-block;
+      border-left      : 1px solid #666;
+      .animate(background-color);
+      &:hover{
+        background-color : red;
+      }
+    }
+    .confirm {
+      width            : 48%;
+      margin           : 1px;
+      padding          : 5px;
+      background-color : #333;
+      display          : inline-block;
+      color            : white;
+      .animate(background-color);
+      &:hover{
+        background-color : teal;
+      }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx
index 4f2e8f8a2..94d5aef3b 100644
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -254,15 +254,6 @@ const EditPage = createClass({
 					</div>
 				</div>
 			}
-
-			{this.state.alertTrashedGoogleBrew &&
-				<div className='errorContainer' onClick={this.closeAlerts}>
-				This brew is currently in your Trash folder on Google Drive!<br />If you want to keep it, make sure to move it before it is deleted permanently!<br />
-					<div className='confirm'>
-						OK
-					</div>
-				</div>
-			}
 		</Nav.item>;
 	},
 
@@ -344,6 +335,16 @@ const EditPage = createClass({
 		const shareLink = this.processShareId();
 
 		return <Navbar>
+
+			{this.state.alertTrashedGoogleBrew &&
+				<div className='errorContainer' onClick={this.closeAlerts}>
+				This brew is currently in your Trash folder on Google Drive!<br />If you want to keep it, make sure to move it before it is deleted permanently!<br />
+					<div className='confirm'>
+						OK
+					</div>
+				</div>
+			}
+
 			<Nav.section>
 				<Nav.item className='brewTitle'>{this.state.brew.title}</Nav.item>
 			</Nav.section>

From 22b6b6a4733296c8a66958197d8ac1222cce16cd Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sun, 9 Apr 2023 11:00:07 +1200
Subject: [PATCH 12/30] Comment out `valid-expect` linter rule

---
 .eslintrc.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 4e57c5c7f..cbab78067 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -24,7 +24,7 @@ module.exports = {
 		'react/jsx-no-bind'      : ['error', { allowArrowFunctions: true }],
 		'react/jsx-uses-react'   : 'error',
 		'react/prefer-es6-class' : ['error', 'never'],
-		'jest/valid-expect'      : ['error', { maxArgs: 2	}],
+		// 'jest/valid-expect'      : ['error', { maxArgs: 2	}],
 
 		/** Warnings **/
 		'max-lines' : ['warn', {

From c5bd41acbff670bc511f3d9dc7f48195e9a39e46 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sun, 9 Apr 2023 11:00:41 +1200
Subject: [PATCH 13/30] Adjust tag styling

---
 client/homebrew/navbar/metadata.navitem.jsx | 6 +++++-
 client/homebrew/navbar/navbar.less          | 7 +++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/client/homebrew/navbar/metadata.navitem.jsx b/client/homebrew/navbar/metadata.navitem.jsx
index 9f56e89e3..746f6b88a 100644
--- a/client/homebrew/navbar/metadata.navitem.jsx
+++ b/client/homebrew/navbar/metadata.navitem.jsx
@@ -35,7 +35,11 @@ const MetadataNav = createClass({
 
 	getTags : function(){
 		if(!this.props.brew.tags) return 'No tags';
-		return this.props.brew.tags.join(', ');
+		return <>
+			{this.props.brew.tags.map((tag, idx)=>{
+				return <span className='tag' key={idx}>{tag}</span>;
+			})}
+		</>;
 	},
 
 	getSystems : function(){
diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index b24e43d48..831c25a89 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -218,6 +218,13 @@
 						flex-basis       : 80%;
 						flex-grow        : 1;
 						border-top       : 1px solid #888;
+						.tag{
+							border: 2px solid grey;
+							padding: 2px;
+							margin: -2px 2px;
+							display: inline-block;
+							border-radius: 5px;
+						}
 					}
 				}
 			}

From aa0cc1ebf66df9213b14251a0f3f03128e36dff7 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sun, 9 Apr 2023 13:33:53 +1200
Subject: [PATCH 14/30] Move Metadata window to title

---
 client/homebrew/navbar/metadata.navitem.jsx |  42 ++++----
 client/homebrew/navbar/navbar.less          | 101 ++++++++++----------
 2 files changed, 71 insertions(+), 72 deletions(-)

diff --git a/client/homebrew/navbar/metadata.navitem.jsx b/client/homebrew/navbar/metadata.navitem.jsx
index 746f6b88a..2389daa1f 100644
--- a/client/homebrew/navbar/metadata.navitem.jsx
+++ b/client/homebrew/navbar/metadata.navitem.jsx
@@ -50,28 +50,26 @@ const MetadataNav = createClass({
 	renderMetaWindow : function(){
 		if(!this.state.showMetaWindow) return null;
 
-		return <div className='windowWrapper'>
-			<div className='window'>
-				<div className='row'>
-					<h4>Description</h4>
-					<p>{this.props.brew.description || 'No description.'}</p>
-				</div>
-				<div className='row'>
-					<h4>Authors</h4>
-					<p>{this.getAuthors()}</p>
-				</div>
-				<div className='row'>
-					<h4>Tags</h4>
-					<p>{this.getTags()}</p>
-				</div>
-				<div className='row'>
-					<h4>Systems</h4>
-					<p>{this.getSystems()}</p>
-				</div>
-				<div className='row'>
-					<h4>Last Updated</h4>
-					<p>{Moment(this.props.brew.updatedAt).fromNow()}</p>
-				</div>
+		return <div className='window'>
+			<div className='row'>
+				<h4>Description</h4>
+				<p>{this.props.brew.description || 'No description.'}</p>
+			</div>
+			<div className='row'>
+				<h4>Authors</h4>
+				<p>{this.getAuthors()}</p>
+			</div>
+			<div className='row'>
+				<h4>Tags</h4>
+				<p>{this.getTags()}</p>
+			</div>
+			<div className='row'>
+				<h4>Systems</h4>
+				<p>{this.getSystems()}</p>
+			</div>
+			<div className='row'>
+				<h4>Updated</h4>
+				<p>{Moment(this.props.brew.updatedAt).fromNow()}</p>
 			</div>
 		</div>;
 	},
diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 831c25a89..8b9bfd359 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -175,59 +175,60 @@
 		i{
 			margin-right: 10px;
 		}
-		.windowWrapper{
-			position: fixed;
-			top: 18px;
-			left: 0px;
-			width: calc(100vw - 30px);
-			z-index: -1;
-			.window{
-				max-width : 764px;
-				width     : 80%;
-				min-width : 380px;
-				max-height : ~"calc(100vh - 28px)";
-				background-color : #333;
-				display: flex;
-				flex-flow: row wrap;
-				justify-content: flex-start;
-				align-content: baseline;
-				padding: 10px 10px 0px;
-				border-radius: 5px;
-				margin: 0 auto;
-				.row{
-					display   : flex;
-					flex-flow : row wrap;
-					width     : 100%;
-					h4{
-						display          : block;
-						box-sizing       : border-box;
-						padding          : 5px 0px;
-						color            : #bbb;
-						text-align       : center;
-						border-top       : 1px solid #888;
-						flex-basis       : 20%;
-						flex-grow        : 1;
-						min-width        : 76px;
-					}
-					p{
-						font-family      : 'Open Sans', sans-serif;
-						font-size        : 10px;
-						font-weight      : normal;
-						text-transform 	 : initial;
-						padding          : 5px 0;
-						flex-basis       : 80%;
-						flex-grow        : 1;
-						border-top       : 1px solid #888;
-						.tag{
-							border: 2px solid grey;
-							padding: 2px;
-							margin: -2px 2px;
-							display: inline-block;
-							border-radius: 5px;
-						}
+		// .windowWrapper{
+		// 	position: fixed;
+		// 	top: 18px;
+		// 	left: 0px;
+		// 	width: calc(100vw - 30px);
+		// 	z-index: -1;
+		.window{
+			position: absolute;
+			top: 100%;
+			width: 80%;
+			left: 10%;
+			max-height : ~"calc(100vh - 28px)";
+			background-color : #333;
+			display: flex;
+			flex-flow: row wrap;
+			justify-content: flex-start;
+			align-content: baseline;
+			padding: 0px 10px;
+			border-radius: 0 0 5px 5px;
+			margin: 0 auto;
+			.row{
+				display   : flex;
+				flex-flow : row wrap;
+				width     : 100%;
+				h4{
+					display          : block;
+					box-sizing       : border-box;
+					padding          : 5px 0px;
+					color            : #bbb;
+					text-align       : center;
+					border-top       : 1px solid #888;
+					flex-basis       : 20%;
+					flex-grow        : 1;
+					min-width        : 76px;
+				}
+				p{
+					font-family      : 'Open Sans', sans-serif;
+					font-size        : 10px;
+					font-weight      : normal;
+					text-transform 	 : initial;
+					padding          : 5px 0;
+					flex-basis       : 80%;
+					flex-grow        : 1;
+					border-top       : 1px solid #888;
+					.tag{
+						border: 2px solid grey;
+						padding: 2px;
+						margin: -2px 2px;
+						display: inline-block;
+						border-radius: 5px;
 					}
 				}
 			}
+			// }
 		}
 	}
 	.warning.navItem{

From ebc90c998aecac7be8486655d1558c4460b82797 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sun, 9 Apr 2023 20:31:12 +1200
Subject: [PATCH 15/30] Position window correctly when nav bar is thick

---
 client/homebrew/navbar/navbar.less | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 8b9bfd359..41ca147e7 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -49,6 +49,7 @@
 		}
 	}
 	.brewTitle.navItem{
+		height: 100%;
 		font-size      : 12px;
 		font-weight    : 800;
 		color          : white;
@@ -172,6 +173,7 @@
 		align-items: center;
 		display  : flex;
 		flex-grow: 1;
+		height: 100%;
 		i{
 			margin-right: 10px;
 		}

From b8e68f9a93f1053082704a561b37cd4e3aaf0396 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sun, 9 Apr 2023 21:01:28 +1200
Subject: [PATCH 16/30] Add animations

---
 client/homebrew/navbar/metadata.navitem.jsx |  4 +---
 client/homebrew/navbar/navbar.less          | 18 +++++++++++-------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/client/homebrew/navbar/metadata.navitem.jsx b/client/homebrew/navbar/metadata.navitem.jsx
index 2389daa1f..b341f772d 100644
--- a/client/homebrew/navbar/metadata.navitem.jsx
+++ b/client/homebrew/navbar/metadata.navitem.jsx
@@ -48,9 +48,7 @@ const MetadataNav = createClass({
 	},
 
 	renderMetaWindow : function(){
-		if(!this.state.showMetaWindow) return null;
-
-		return <div className='window'>
+		return <div className={`window ${this.state.showMetaWindow ? 'active' : 'inactive'}`}>
 			<div className='row'>
 				<h4>Description</h4>
 				<p>{this.props.brew.description || 'No description.'}</p>
diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 41ca147e7..0743f1753 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -177,15 +177,9 @@
 		i{
 			margin-right: 10px;
 		}
-		// .windowWrapper{
-		// 	position: fixed;
-		// 	top: 18px;
-		// 	left: 0px;
-		// 	width: calc(100vw - 30px);
-		// 	z-index: -1;
 		.window{
 			position: absolute;
-			top: 100%;
+			bottom: 0;
 			width: 80%;
 			left: 10%;
 			max-height : ~"calc(100vh - 28px)";
@@ -197,6 +191,16 @@
 			padding: 0px 10px;
 			border-radius: 0 0 5px 5px;
 			margin: 0 auto;
+			z-index: -1;
+			transition: transform 0.5s, opacity 0.5s;
+			&.active{
+				transform: translateY(100%);
+				opacity: 1;
+			}
+			&.inactive{
+				transform: translateY(0%);
+				opacity: 0;
+			}
 			.row{
 				display   : flex;
 				flex-flow : row wrap;

From bc83e1f84d1baccda7a5e771d90797f4e3812727 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sun, 9 Apr 2023 21:33:33 +1200
Subject: [PATCH 17/30] Tweak animation, add alternating bg colors

---
 client/homebrew/navbar/navbar.less | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 0743f1753..dd389c560 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -192,7 +192,7 @@
 			border-radius: 0 0 5px 5px;
 			margin: 0 auto;
 			z-index: -1;
-			transition: transform 0.5s, opacity 0.5s;
+			transition: transform 0.4s, opacity 0.4s;
 			&.active{
 				transform: translateY(100%);
 				opacity: 1;
@@ -205,13 +205,13 @@
 				display   : flex;
 				flex-flow : row wrap;
 				width     : 100%;
+				// border-top       : 1px solid #888;
 				h4{
 					display          : block;
 					box-sizing       : border-box;
 					padding          : 5px 0px;
 					color            : #bbb;
 					text-align       : center;
-					border-top       : 1px solid #888;
 					flex-basis       : 20%;
 					flex-grow        : 1;
 					min-width        : 76px;
@@ -224,7 +224,6 @@
 					padding          : 5px 0;
 					flex-basis       : 80%;
 					flex-grow        : 1;
-					border-top       : 1px solid #888;
 					.tag{
 						border: 2px solid grey;
 						padding: 2px;
@@ -233,6 +232,9 @@
 						border-radius: 5px;
 					}
 				}
+				&:nth-of-type(even){
+					background-color: #555;
+				}
 			}
 			// }
 		}

From d5dbf46fc43c1b5c489cd1aecd88762cd4a9a3c7 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sun, 9 Apr 2023 21:33:57 +1200
Subject: [PATCH 18/30] Fix "No tags" message

---
 client/homebrew/navbar/metadata.navitem.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/homebrew/navbar/metadata.navitem.jsx b/client/homebrew/navbar/metadata.navitem.jsx
index b341f772d..71756be02 100644
--- a/client/homebrew/navbar/metadata.navitem.jsx
+++ b/client/homebrew/navbar/metadata.navitem.jsx
@@ -34,7 +34,7 @@ const MetadataNav = createClass({
 	},
 
 	getTags : function(){
-		if(!this.props.brew.tags) return 'No tags';
+		if(this.props.brew.tags.length == 0) return 'No tags';
 		return <>
 			{this.props.brew.tags.map((tag, idx)=>{
 				return <span className='tag' key={idx}>{tag}</span>;

From 14ac0988826b7ba40592630a1af3be4c66e160d0 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sun, 9 Apr 2023 21:40:41 +1200
Subject: [PATCH 19/30] Fix no systems/tags/authors mesasges

---
 client/homebrew/navbar/metadata.navitem.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/homebrew/navbar/metadata.navitem.jsx b/client/homebrew/navbar/metadata.navitem.jsx
index 71756be02..d06c95642 100644
--- a/client/homebrew/navbar/metadata.navitem.jsx
+++ b/client/homebrew/navbar/metadata.navitem.jsx
@@ -29,12 +29,12 @@ const MetadataNav = createClass({
 	},
 
 	getAuthors : function(){
-		if(!this.props.brew.authors) return 'No authors';
+		if(!this.props.brew.authors || this.props.brew.authors.length == 0) return 'No authors';
 		return this.props.brew.authors.join(', ');
 	},
 
 	getTags : function(){
-		if(this.props.brew.tags.length == 0) return 'No tags';
+		if(!this.props.brew.tags || this.props.brew.tags.length == 0) return 'No tags';
 		return <>
 			{this.props.brew.tags.map((tag, idx)=>{
 				return <span className='tag' key={idx}>{tag}</span>;
@@ -43,7 +43,7 @@ const MetadataNav = createClass({
 	},
 
 	getSystems : function(){
-		if(!this.props.brew.systems) return 'No systems';
+		if(!this.props.brew.systems || this.props.brew.systems.length == 0) return 'No systems';
 		return this.props.brew.systems.join(', ');
 	},
 

From 0e226ca8db19370f16e545c590118f49ee438d55 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sun, 9 Apr 2023 22:26:15 +1200
Subject: [PATCH 20/30] Add min and max widths

---
 client/homebrew/navbar/navbar.less | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index dd389c560..aae1f87f3 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -180,7 +180,9 @@
 		.window{
 			position: absolute;
 			bottom: 0;
+			min-width: 100px;
 			width: 80%;
+			max-width: 440px;
 			left: 10%;
 			max-height : ~"calc(100vh - 28px)";
 			background-color : #333;
@@ -188,7 +190,7 @@
 			flex-flow: row wrap;
 			justify-content: flex-start;
 			align-content: baseline;
-			padding: 0px 10px;
+			padding: 0px 10px 5px;
 			border-radius: 0 0 5px 5px;
 			margin: 0 auto;
 			z-index: -1;

From eb7d558c8d44826235941fcb45c2c8c87a4fc312 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sun, 9 Apr 2023 23:24:54 +1200
Subject: [PATCH 21/30] Change author names to UserPage links

---
 client/homebrew/navbar/metadata.navitem.jsx | 10 ++++++++--
 client/homebrew/navbar/navbar.less          |  7 +++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/client/homebrew/navbar/metadata.navitem.jsx b/client/homebrew/navbar/metadata.navitem.jsx
index d06c95642..2642f160c 100644
--- a/client/homebrew/navbar/metadata.navitem.jsx
+++ b/client/homebrew/navbar/metadata.navitem.jsx
@@ -7,7 +7,7 @@ const Nav = require('naturalcrit/nav/nav.jsx');
 
 
 const MetadataNav = createClass({
-	DisplayName     : 'MetadataNav',
+	displayName     : 'MetadataNav',
 	getDefaultProps : function() {
 		return {
 		};
@@ -30,7 +30,13 @@ const MetadataNav = createClass({
 
 	getAuthors : function(){
 		if(!this.props.brew.authors || this.props.brew.authors.length == 0) return 'No authors';
-		return this.props.brew.authors.join(', ');
+		return <>
+			{this.props.brew.authors.map((author, idx, arr)=>{
+				let spacer = <span>, </span>;
+				if(arr.length - 1 == idx) spacer = <></>;
+				return <span key={idx}><a className='userPageLink' href={`/user/${author}`}>{author}</a>{spacer}</span>;
+			})}
+		</>;
 	},
 
 	getTags : function(){
diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index aae1f87f3..67c504e2b 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -233,6 +233,13 @@
 						display: inline-block;
 						border-radius: 5px;
 					}
+					a.userPageLink{
+						text-decoration: none;
+						color: white;
+						&:hover{
+							text-decoration: underline;
+						}
+					}
 				}
 				&:nth-of-type(even){
 					background-color: #555;

From 9690c6dac3f7a55a1fe4bfbe92f9c1fb0dc37c3d Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Mon, 10 Apr 2023 09:35:56 +1200
Subject: [PATCH 22/30] Center metadata window

---
 client/homebrew/navbar/navbar.less | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 67c504e2b..038cdd676 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -183,7 +183,8 @@
 			min-width: 100px;
 			width: 80%;
 			max-width: 440px;
-			left: 10%;
+			left: 0;
+			right : 0;
 			max-height : ~"calc(100vh - 28px)";
 			background-color : #333;
 			display: flex;

From 0aac08f276599a0b74e215eb9dc220813277d3ef Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Mon, 10 Apr 2023 10:16:28 +1200
Subject: [PATCH 23/30] Move from `let` to `const`

---
 client/homebrew/navbar/metadata.navitem.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/homebrew/navbar/metadata.navitem.jsx b/client/homebrew/navbar/metadata.navitem.jsx
index 2642f160c..f4a09e143 100644
--- a/client/homebrew/navbar/metadata.navitem.jsx
+++ b/client/homebrew/navbar/metadata.navitem.jsx
@@ -32,8 +32,7 @@ const MetadataNav = createClass({
 		if(!this.props.brew.authors || this.props.brew.authors.length == 0) return 'No authors';
 		return <>
 			{this.props.brew.authors.map((author, idx, arr)=>{
-				let spacer = <span>, </span>;
-				if(arr.length - 1 == idx) spacer = <></>;
+				const spacer = arr.length - 1 == idx ? <></> : <span>, </span>;
 				return <span key={idx}><a className='userPageLink' href={`/user/${author}`}>{author}</a>{spacer}</span>;
 			})}
 		</>;

From 4ddee3c2f138bb8e34b69f7f1e293ecb6867a497 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Mon, 10 Apr 2023 10:17:15 +1200
Subject: [PATCH 24/30] Remove z-index to fix UserPage bug

---
 client/homebrew/navbar/navbar.less | 1 -
 shared/naturalcrit/nav/nav.less    | 1 -
 2 files changed, 2 deletions(-)

diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 038cdd676..b78513591 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -85,7 +85,6 @@
 	}
 	.recent.navItem {
 		position : relative;
-		z-index  : 2;
 		.dropdown{
 			position   : absolute;
 			top        : 28px;
diff --git a/shared/naturalcrit/nav/nav.less b/shared/naturalcrit/nav/nav.less
index e085822b6..43eaa0819 100644
--- a/shared/naturalcrit/nav/nav.less
+++ b/shared/naturalcrit/nav/nav.less
@@ -72,7 +72,6 @@ nav{
 	}
 	.navDropdownContainer{
 		position: relative;
-		z-index: 2;
 		.navDropdown {
 			position : absolute;
 			top      : 28px;

From 8b8388391c3f761d809abd03ac2675477bb14791 Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Mon, 10 Apr 2023 10:45:30 -0400
Subject: [PATCH 25/30] Shorten logic

---
 shared/naturalcrit/nav/nav.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shared/naturalcrit/nav/nav.jsx b/shared/naturalcrit/nav/nav.jsx
index 7a8b9cda9..5d5aacd78 100644
--- a/shared/naturalcrit/nav/nav.jsx
+++ b/shared/naturalcrit/nav/nav.jsx
@@ -29,7 +29,7 @@ const Nav = {
 	section : createClass({
 		displayName : 'Nav.section',
 		render      : function(){
-			return <div className={this.props.className ? `navSection ${this.props.className}` : 'navSection'}>
+			return <div className={`navSection ${this.props.className ?? ''}`}>
 				{this.props.children}
 			</div>;
 		}

From ebf9cf936477383cbc14b6c66f364fe0cd731106 Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Mon, 10 Apr 2023 10:46:42 -0400
Subject: [PATCH 26/30] Undo change to eslintrc

---
 .eslintrc.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index cbab78067..4e57c5c7f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -24,7 +24,7 @@ module.exports = {
 		'react/jsx-no-bind'      : ['error', { allowArrowFunctions: true }],
 		'react/jsx-uses-react'   : 'error',
 		'react/prefer-es6-class' : ['error', 'never'],
-		// 'jest/valid-expect'      : ['error', { maxArgs: 2	}],
+		'jest/valid-expect'      : ['error', { maxArgs: 2	}],
 
 		/** Warnings **/
 		'max-lines' : ['warn', {

From 29fd836965f4c0f3ed84172377c7e24639d435e8 Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Mon, 10 Apr 2023 11:31:11 -0400
Subject: [PATCH 27/30] Lift whole navbar z-index up instead of one section.

---
 client/homebrew/pages/sharePage/sharePage.less | 1 -
 shared/naturalcrit/nav/nav.less                | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/homebrew/pages/sharePage/sharePage.less b/client/homebrew/pages/sharePage/sharePage.less
index 792bec360..83e784c49 100644
--- a/client/homebrew/pages/sharePage/sharePage.less
+++ b/client/homebrew/pages/sharePage/sharePage.less
@@ -2,7 +2,6 @@
 	.navContent .navSection.titleSection {
 		flex-grow: 1;
 		justify-content: center;
-		z-index: 2;
 	}
 	.content{
 		overflow-y : hidden;
diff --git a/shared/naturalcrit/nav/nav.less b/shared/naturalcrit/nav/nav.less
index 43eaa0819..e01715a95 100644
--- a/shared/naturalcrit/nav/nav.less
+++ b/shared/naturalcrit/nav/nav.less
@@ -13,6 +13,7 @@ nav{
 		position			  : relative;
 		display         : flex;
 		justify-content : space-between;
+		z-index         : 2;
 	}
 	.navSection{
 		display     : flex;

From a2430c87442ffdf3a20db5dd25edd7254973be72 Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Tue, 11 Apr 2023 21:26:16 -0400
Subject: [PATCH 28/30] Tweak size and centering strategy

---
 client/homebrew/navbar/navbar.less | 42 ++++++++++++++----------------
 1 file changed, 20 insertions(+), 22 deletions(-)

diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index b78513591..b91b43f3b 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -143,7 +143,7 @@
 				}
 				&:hover{
 					background-color : @blue;
-					
+
 					.clear{
 						display       : grid;
 						place-content : center;
@@ -177,37 +177,36 @@
 			margin-right: 10px;
 		}
 		.window{
-			position: absolute;
-			bottom: 0;
-			min-width: 100px;
-			width: 80%;
-			max-width: 440px;
-			left: 0;
-			right : 0;
-			max-height : ~"calc(100vh - 28px)";
+			position         : absolute;
+			bottom           : 0;
+			width            : 440px;
+			left             : 50%;
+			max-height       : ~"calc(100vh - 28px)";
 			background-color : #333;
-			display: flex;
-			flex-flow: row wrap;
-			justify-content: flex-start;
-			align-content: baseline;
-			padding: 0px 10px 5px;
-			border-radius: 0 0 5px 5px;
-			margin: 0 auto;
-			z-index: -1;
-			transition: transform 0.4s, opacity 0.4s;
+			border           : 3px solid #444;
+			border-top       : unset;
+			border-radius    : 0 0 5px 5px;
+			box-shadow       : inset 0 7px 9px -7px #111;
+			display          : flex;
+			flex-flow        : row wrap;
+			justify-content  : flex-start;
+			align-content    : baseline;
+			padding          : 0px 10px 5px;
+			margin           : 0 auto;
+			z-index          : -1;
+			transition       : transform 0.4s, opacity 0.4s;
 			&.active{
-				transform: translateY(100%);
+				transform: translateX(-50%) translateY(100%);
 				opacity: 1;
 			}
 			&.inactive{
-				transform: translateY(0%);
+				transform: translateX(-50%) translateY(0%);
 				opacity: 0;
 			}
 			.row{
 				display   : flex;
 				flex-flow : row wrap;
 				width     : 100%;
-				// border-top       : 1px solid #888;
 				h4{
 					display          : block;
 					box-sizing       : border-box;
@@ -245,7 +244,6 @@
 					background-color: #555;
 				}
 			}
-			// }
 		}
 	}
 	.warning.navItem{

From d369cad02caa03f4026305da7f2f90df5ee0e253 Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Tue, 11 Apr 2023 21:29:01 -0400
Subject: [PATCH 29/30] Tweak tag bubbles

---
 client/homebrew/navbar/navbar.less | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index b91b43f3b..3e5f8cddf 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -226,11 +226,12 @@
 					flex-basis       : 80%;
 					flex-grow        : 1;
 					.tag{
-						border: 2px solid grey;
-						padding: 2px;
-						margin: -2px 2px;
-						display: inline-block;
-						border-radius: 5px;
+						border           : 2px solid grey;
+						padding          : 2px;
+						margin           : 2px 2px;
+						display          : inline-block;
+						border-radius    : 5px;
+						background-color : #444;
 					}
 					a.userPageLink{
 						text-decoration: none;

From c8b8d4086398817e6400cb599d2442ce5e8c7eaf Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Tue, 11 Apr 2023 21:35:18 -0400
Subject: [PATCH 30/30] Adjust userpage z-index to fit nav bar tweaks.

---
 client/homebrew/pages/basePages/listPage/listPage.less | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less
index 4e5557a3e..bcffbf3e7 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.less
+++ b/client/homebrew/pages/basePages/listPage/listPage.less
@@ -16,6 +16,7 @@
 }
 .listPage{
 	.content{
+		z-index : 1;
 		.page{
 			.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
 			&::after{
@@ -63,7 +64,7 @@
 		border-bottom         : 1px solid #666;
 		color              : white;
 		text-align         : center;
-		z-index            : 500;
+		z-index            : 1;
 		display            : flex;
 		justify-content    : center;
 		align-items        : baseline;