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