Add black background to detail text in character dropdown (#8487)

* FIX: add black background to detail text in character dropdown

Character names are currently drawn over the top of the details on the
right of the dropdown. If a name happens to be very long (often happens
when using tofu for utf-8) the details stop being legible. This adds a
black background behind the detail text to make it more readable.

* FIX: fix import dropdown detail visibility when no explicit color code
is used

src/Classes/DropDownControl.lua

@@ -319,6 +319,19 @@ function DropDownClass:Draw(viewPort, noTooltip)
 	DrawString(0, 0, "LEFT", lineHeight, "VAR", selLabel or "")
 	if selDetail ~= nil then
 		local dx = DrawStringWidth(lineHeight, "VAR", selDetail)
+		if not enabled or self.dropped then
+			SetDrawColor(0, 0, 0)
+		elseif mOver then
+			SetDrawColor(0.33, 0.33, 0.33)
+		else
+			SetDrawColor(0, 0, 0)
+		end
+		DrawImage(nil, width - dx - 4 - 22, 0, width - 4, lineHeight)
+		if enabled then
+			SetDrawColor(1, 1, 1)
+		else
+			SetDrawColor(0.66, 0.66, 0.66)
+		end
 		DrawString(width - dx - 22, 0, "LEFT", lineHeight, "VAR", selDetail)
 	end
 	SetViewport()
@@ -378,7 +391,19 @@ function DropDownClass:Draw(viewPort, noTooltip)
 				DrawString(0, y, "LEFT", lineHeight, "VAR", label)
 				if detail ~= nil then
 					local detail = listVal.detail
-					dx = DrawStringWidth(lineHeight, "VAR", detail)
+					local dx = DrawStringWidth(lineHeight, "VAR", detail)
+					if index == self.hoverSel then
+						SetDrawColor(0.33, 0.33, 0.33)
+					else
+						SetDrawColor(0, 0, 0)
+					end
+					DrawImage(nil, width - dx - 8 - 22, y, width - 4, lineHeight)
+					-- highlight font color if hovered or selected
+					if index == self.hoverSel or index == self.selIndex then
+						SetDrawColor(1, 1, 1)
+					else
+						SetDrawColor(0.66, 0.66, 0.66)
+					end
 					DrawString(width - dx - 4 - 22, y, "LEFT", lineHeight, "VAR", detail)
 				end
 				self:DrawSearchHighlights(label, searchInfo, 0, y, width - 4, lineHeight)