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