From bb25d30663bfe543ee9d4a1119238bb8c753799d Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Thu, 15 Sep 2022 12:29:25 -0500
Subject: [PATCH 1/5] flex working, but odd vertical spacing

---
 .../editor/metadataEditor/metadataEditor.jsx  | 34 +++++++------
 .../editor/metadataEditor/metadataEditor.less | 50 +++++++++++++------
 2 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index 29c193323..a793c4f3f 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -231,23 +231,25 @@ const MetadataEditor = createClass({
 					value={this.props.metadata.title}
 					onChange={(e)=>this.handleFieldChange('title', e)} />
 			</div>
-			<div className='field description'>
-				<label>description</label>
-				<textarea value={this.props.metadata.description} className='value'
-					onChange={(e)=>this.handleFieldChange('description', e)} />
-			</div>
-			<div className='field thumbnail'>
-				<label>thumbnail</label>
-				<input type='text'
-					value={this.props.metadata.thumbnail}
-					placeholder='my.thumbnail.url'
-					className='value'
-					onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
-				<button className='display' onClick={this.toggleThumbnailDisplay}>
-					<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
-				</button>
-				{this.renderThumbnail()}
+			<div className='field-group'>
+				<div className='field description'>
+					<label>description</label>
+					<textarea value={this.props.metadata.description} className='value'
+						onChange={(e)=>this.handleFieldChange('description', e)} />
+				</div>
+				<div className='field thumbnail'>
+					<label>thumbnail</label>
+					<input type='text'
+						value={this.props.metadata.thumbnail}
+						placeholder='my.thumbnail.url'
+						className='value'
+						onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
+					<button className='display' onClick={this.toggleThumbnailDisplay}>
+						<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
+					</button>
+				</div>
 			</div>
+			{this.renderThumbnail()}
 
 			<StringArrayEditor label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
 				placeholder='add tag' unique={true}
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index 96bb4858a..bfa1e63c1 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -7,10 +7,21 @@
 	width            : 100%;
 	padding          : 25px;
 	background-color : #999;
+	height           : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar.  probably a better way to dynamic get this.
+
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+
+	.field-group {
+		display: flex;
+		flex-direction: column;
+		flex: 5;
+		gap: 10px;
+	}
 	.field{
 		display       : flex;
 		width         : 100%;
-		margin-bottom : 10px;
 		&>label{
 			display        : inline-block;
 			vertical-align : top;
@@ -23,7 +34,7 @@
 		}
 		&>.value{
 			flex           : 1 1 auto;
-			min-width      : 200px;
+			width          : 50px;
 		}
 		&.thumbnail{
 			height      : 1.4em;
@@ -43,22 +54,33 @@
 					background-color: #777;
 				}
 			}
-			.thumbnail-preview{
-				position    : relative;
-				width       : 80px;
-				height      : min-content;
-				border      : 2px solid white;
-				margin-left : 5px;
-				max-height  : 115px;
+		}
+
+		&.description {
+			flex: 1;
+			textarea.value {
+				resize      : none;
+				height      : auto;
+				font-family : 'Open Sans', sans-serif;
+				font-size   : 0.8em;
 			}
 		}
 	}
-	.description.field textarea.value{
-		resize      : none;
-		height      : 5em;
-		font-family : 'Open Sans', sans-serif;
-		font-size   : 0.8em;
+
+
+	.thumbnail-preview {
+		position: relative;
+		justify-self: center;
+		width: 80px;
+		height: min-content;
+		border: 2px solid white;
+		flex: 1 1;
+		max-height: 115px;
+		aspect-ratio: 1 / 1;
+		object-fit: contain;
+		background-color: cadetblue;
 	}
+
 	.systems.field .value{
 		label{
 			vertical-align : middle;

From fc5d06be0ee8fe73c293f07a4ef48a24339e8784 Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Thu, 15 Sep 2022 13:19:27 -0500
Subject: [PATCH 2/5] fixed vertical spacing

---
 .../editor/metadataEditor/metadataEditor.jsx  | 34 ++++++++++---------
 .../editor/metadataEditor/metadataEditor.less | 19 ++++++++---
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index a793c4f3f..25b4daac8 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -232,24 +232,26 @@ const MetadataEditor = createClass({
 					onChange={(e)=>this.handleFieldChange('title', e)} />
 			</div>
 			<div className='field-group'>
-				<div className='field description'>
-					<label>description</label>
-					<textarea value={this.props.metadata.description} className='value'
-						onChange={(e)=>this.handleFieldChange('description', e)} />
-				</div>
-				<div className='field thumbnail'>
-					<label>thumbnail</label>
-					<input type='text'
-						value={this.props.metadata.thumbnail}
-						placeholder='my.thumbnail.url'
-						className='value'
-						onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
-					<button className='display' onClick={this.toggleThumbnailDisplay}>
-						<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
-					</button>
+				<div className='field-column'>
+					<div className='field description'>
+						<label>description</label>
+						<textarea value={this.props.metadata.description} className='value'
+							onChange={(e)=>this.handleFieldChange('description', e)} />
+					</div>
+					<div className='field thumbnail'>
+						<label>thumbnail</label>
+						<input type='text'
+							value={this.props.metadata.thumbnail}
+							placeholder='my.thumbnail.url'
+							className='value'
+							onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
+						<button className='display' onClick={this.toggleThumbnailDisplay}>
+							<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
+						</button>
+					</div>
 				</div>
+				{this.renderThumbnail()}
 			</div>
-			{this.renderThumbnail()}
 
 			<StringArrayEditor label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
 				placeholder='add tag' unique={true}
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index bfa1e63c1..b804b8772 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -9,19 +9,28 @@
 	background-color : #999;
 	height           : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar.  probably a better way to dynamic get this.
 
-	display: flex;
-	flex-wrap: wrap;
-	gap: 10px;
+	& > div {
+		margin-bottom: 10px;
+	}
 
 	.field-group {
 		display: flex;
-		flex-direction: column;
-		flex: 5;
+		width: 100%;
+		flex-wrap: wrap;
 		gap: 10px;
 	}
+
+	.field-column {
+		display: flex;
+		flex-direction: column;
+		flex: 5 0 200px;
+		gap: 10px;
+		
+	}
 	.field{
 		display       : flex;
 		width         : 100%;
+		min-width     : 200px;
 		&>label{
 			display        : inline-block;
 			vertical-align : top;

From 49a30577659765f6ed7f372266dd5e456c1d126c Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Thu, 15 Sep 2022 13:33:19 -0500
Subject: [PATCH 3/5] clear out some unused properties

---
 client/homebrew/editor/metadataEditor/metadataEditor.less | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index b804b8772..0e4ae434e 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -32,14 +32,11 @@
 		width         : 100%;
 		min-width     : 200px;
 		&>label{
-			display        : inline-block;
-			vertical-align : top;
 			width          : 80px;
 			font-size      : 11px;
 			font-weight    : 800;
 			line-height    : 1.8em;
 			text-transform : uppercase;
-			flex           : 0 0 auto;
 		}
 		&>.value{
 			flex           : 1 1 auto;

From b120c47faaaf1814c4badb6492703d494fe0977b Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Thu, 15 Sep 2022 13:38:09 -0500
Subject: [PATCH 4/5] add vertical scroll - auto

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

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index 0e4ae434e..3bb866168 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -8,6 +8,7 @@
 	padding          : 25px;
 	background-color : #999;
 	height           : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar.  probably a better way to dynamic get this.
+	overflow-y       : auto;
 
 	& > div {
 		margin-bottom: 10px;

From f3c9dde801f99cecb555be3f5d4ccc581bc07450 Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Wed, 21 Sep 2022 20:50:10 -0500
Subject: [PATCH 5/5] thumbnail preview de-uglification

---
 client/homebrew/editor/metadataEditor/metadataEditor.less | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index 3bb866168..9b2761306 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -80,12 +80,11 @@
 		justify-self: center;
 		width: 80px;
 		height: min-content;
-		border: 2px solid white;
 		flex: 1 1;
 		max-height: 115px;
 		aspect-ratio: 1 / 1;
 		object-fit: contain;
-		background-color: cadetblue;
+		background-color: #AAA;
 	}
 
 	.systems.field .value{