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] 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;
+				}
 			}
 		}
 	}