From 295fea7581b7840808f11a5bbb021d21fbad842e Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Tue, 7 May 2024 11:00:20 -0500
Subject: [PATCH] Add dropdownTexture for user theme options

If a user theme document has a thumbnail, this will include that thumbnail as a dropdown texture in the options.
---
 .../editor/metadataEditor/metadataEditor.jsx  |  5 +++-
 .../editor/metadataEditor/metadataEditor.less | 25 +++++++++++++------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index d402d9955..61efa81c1 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -200,9 +200,12 @@ const MetadataEditor = createClass({
 		const listThemes = (renderer)=>{
 			return _.map(_.values(mergedThemes[renderer]), (theme)=>{
 				const preview = theme?.thumbnail ? theme.thumbnail : `/themes/${theme.renderer}/${theme.path}/dropdownPreview.png`;
+				const texture = theme?.thumbnail ? theme.thumbnail : `/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`;
 				return <div className='item' key={`${renderer}_${theme.name}`} onClick={()=>this.handleTheme(theme, renderer)} title={''}>
 					{`${renderer} : ${theme.name}`}
-					<img src={`/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`}/>
+					<div className='texture-container'>
+						<img src={`${texture}`}/>
+					</div>
 					<div className='preview'>
 						<h6>{`${theme.name}`} preview</h6>
 						<img src={`${preview}`}/>
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index 7f7ce3060..23e6f4415 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -230,14 +230,23 @@
 					&:hover > .preview {
 						opacity: 1;
 					}
-					>img {
-						mask-image			    : linear-gradient(90deg, transparent, black 20%);
-						-webkit-mask-image	: linear-gradient(90deg, transparent, black 20%);
-				    	position			    : absolute;
-				    	right				      : 0;
-				    	top					      : 0px;
-						width				        : 50%;
-						height				      : 100%;
+					.texture-container {
+						position: absolute;
+						width: 100%;
+						height: 100%;
+						min-height: 100%;
+						top: 0;
+						left: 0;
+						overflow: hidden;
+						> img {
+							mask-image			    : linear-gradient(90deg, transparent, black 20%);
+							-webkit-mask-image	: linear-gradient(90deg, transparent, black 20%);
+							position			    : absolute;
+							right				      : 0;
+							top					      : 0px;
+							width				        : 50%;
+							min-height: 100%;
+						}
 					}
 				}
 			}