From 71ed375160ad3ebf81ccd5b39afb3d2fe9b47118 Mon Sep 17 00:00:00 2001
From: Jeremy Rifkin <51220084+jeremy-rifkin@users.noreply.github.com>
Date: Wed, 7 Dec 2022 09:24:45 -0500
Subject: [PATCH] Fix tomselect arrow padding (#4403)

---
 static/styles/explorer.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/static/styles/explorer.scss b/static/styles/explorer.scss
index 7d075e99d01..b79f2411688 100644
--- a/static/styles/explorer.scss
+++ b/static/styles/explorer.scss
@@ -869,6 +869,15 @@ html[data-theme='dark'] {
     text-transform: uppercase;
 }
 
+.ts-wrapper.single .ts-control {
+    /* This is a workaround for a bug where the arrow overlaps the text in the tomselect item. This issue only effects
+     * staging (and presumably prod), it does not occur locally. Tomselect already styles this as `padding-right: 2rem;`
+     * but for some reason on staging/prod it's `--ts-pr-caret: 2rem;`. Changing it to `padding-right: 2rem;` in dev
+     * tools doesn't work, the property is greyed out as though something else is taking precedent but it's not.
+     */
+    padding-right: 2rem !important;
+}
+
 .copy-link-btn {
     padding-top: 0;
 }