diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index 29c193323..25b4daac8 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -231,21 +231,25 @@ const MetadataEditor = createClass({
value={this.props.metadata.title}
onChange={(e)=>this.handleFieldChange('title', e)} />
-
-
-
-
-
-
this.handleFieldChange('thumbnail', e)} />
-
+
+
+
+
+
+
+
+ this.handleFieldChange('thumbnail', e)} />
+
+
+
{this.renderThumbnail()}
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index 96bb4858a..9b2761306 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -7,23 +7,41 @@
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.
+ overflow-y : auto;
+
+ & > div {
+ margin-bottom: 10px;
+ }
+
+ .field-group {
+ display: flex;
+ 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%;
- margin-bottom : 10px;
+ 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;
- min-width : 200px;
+ width : 50px;
}
&.thumbnail{
height : 1.4em;
@@ -43,22 +61,32 @@
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;
+ flex: 1 1;
+ max-height: 115px;
+ aspect-ratio: 1 / 1;
+ object-fit: contain;
+ background-color: #AAA;
}
+
.systems.field .value{
label{
vertical-align : middle;