From 69f01b282a316c6297110fe66db372c26c5b585a Mon Sep 17 00:00:00 2001
From: David Bolack <dbolack@gmail.com>
Date: Mon, 13 May 2024 22:33:58 -0500
Subject: [PATCH] CSS Tweaks for Theme Selector

Add 5e-Cleric's suggestsions to acvoid the title overflowing over the preview.
---
 client/homebrew/editor/metadataEditor/metadataEditor.jsx  | 2 +-
 client/homebrew/editor/metadataEditor/metadataEditor.less | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index 7cc5257f3..586658050 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -202,7 +202,7 @@ const MetadataEditor = createClass({
 				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={''}>
-					{`${theme?.author ? theme.author : renderer} : ${theme.name}`}
+					<p>{`${theme?.author ? theme.author : renderer} : ${theme.name}`}</p>
 					<div className='texture-container'>
 						<img src={`${texture}`}/>
 					</div>
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index 23e6f4415..b157890b1 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -191,6 +191,13 @@
 					color				: white;
 				}
 			}
+			.navDropdown .item > p {
+				width: 45%;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				height: 1.1em;
+			}			
 			.navDropdown {
 				box-shadow	: 0px 5px 10px rgba(0, 0, 0, 0.3);
 				position	  : absolute;