Fix dropdown menus showing double arrows (#7765)

## Summary

Fixes issue #7684 where dropdown menus displayed two arrows instead of
one, particularly visible in light theme.

## Root Cause

The double arrows were caused by conflicts between:
1. **TomSelect's Bootstrap 5 theme** - provides automatic dropdown
arrows via `background-image`
2. **Custom legacy CSS** - was adding duplicate arrows using `::after`
pseudo-elements
3. **Bootstrap 4 leftovers** - manual `<b class="caret">` elements in
templates

## Changes

- **Removed conflicting custom TomSelect arrow CSS** from
`explorer.scss`
- **Removed leftover `#[b.caret]` element** from font-size dropdown
template
- **Fixed theme background properties** - changed `background` to
`background-color` to preserve TomSelect's arrow images
- **Added reusable SCSS function** `dropdown-arrow-svg()` for generating
themed dropdown arrows
- **Updated dark themes** to override arrow colors using TomSelect's
exact CSS selector for precision

## Test Plan

- [x] Verify all dropdown menus show only one arrow in default/light
theme
- [x] Test dropdown arrows are visible and correctly colored in all
themes:
  - [x] Default theme: dark gray arrow
  - [x] Pink theme: dark gray arrow  
  - [x] Dark theme: light gray arrow
  - [x] One-dark theme: medium gray arrow
- [x] Confirm dropdown functionality works correctly across all themes
- [x] Check that font-size dropdown works properly without manual caret
element

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Claude <noreply@anthropic.com>

static/styles/explorer.scss

@@ -1,5 +1,12 @@
 @import '~@fortawesome/fontawesome-free/css/all.min.css';
 
+// SCSS function to generate TomSelect dropdown arrow SVG with custom color
+// Based on the SVG from tom-select.bootstrap5.css line 575 in selector:
+// .ts-wrapper:not(.form-control, .form-select).single .ts-control
+@function dropdown-arrow-svg($color) {
+    @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
+}
+
 /*
  * https://github.com/Microsoft/monaco-editor/issues/417
  * Safari 10.1, fails inherit correct visibility from parent when we change the visibility of parent element from hidden to inherit, in this particular case.
@@ -1203,27 +1210,6 @@ html[data-theme='one-dark'] {
     padding-right: 2rem !important;
 }
 
-/* Add back the dropdown arrow for TomSelect in Bootstrap 5 */
-.ts-wrapper.single .ts-control:not(.input-active)::after {
-    content: " ";
-    display: block;
-    position: absolute;
-    top: 50%;
-    right: 15px;
-    margin-top: -3px;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 5px 5px 0 5px;
-    border-color: #343a40 transparent transparent transparent;
-}
-
-/* Styling for the dropdown arrow when dropdown is active */
-.ts-wrapper.single.dropdown-active .ts-control::after {
-    margin-top: -4px;
-    border-width: 0 5px 5px 5px;
-    border-color: transparent transparent #343a40 transparent;
-}
 
 // Fix Bootstrap 5's input-group border overlap issues with TomSelect
 // Bootstrap applies a -1px margin to elements matching `:not(:first-child)` in input groups

static/styles/themes/dark-theme.scss

@@ -646,13 +646,9 @@ textarea.form-control {
     .ts-control {
         border: none;
         color: #f2f2f2 !important;
-        background: #444 !important;
+        background-color: #444 !important;
         text-shadow: none !important;
 
-        &:after {
-            border-color: #728690 transparent transparent transparent;
-        }
-
         &.disabled {
             color: #f2f2f2 !important;
             background-color: #383838 !important;
@@ -660,6 +656,11 @@ textarea.form-control {
     }
 }
 
+/* Override arrow specifically with the same selector as TomSelect uses */
+.ts-wrapper:not(.form-control, .form-select).single .ts-control {
+    background-image: dropdown-arrow-svg(#aaa) !important;
+}
+
 #compiler-picker-modal {
     .architecture,
     .compiler-type {

static/styles/themes/one-dark-theme.scss

@@ -705,13 +705,9 @@ textarea.form-control {
     .ts-control {
         border: none;
         color: #f2f2f2 !important;
-        background: $light !important;
+        background-color: $light !important;
         text-shadow: none !important;
 
-        &:after {
-            border-color: #525252 transparent transparent transparent;
-        }
-
         &.disabled {
             color: #f2f2f2 !important;
             background-color: $light !important;
@@ -719,6 +715,11 @@ textarea.form-control {
     }
 }
 
+/* Override arrow specifically with the same selector as TomSelect uses */
+.ts-wrapper:not(.form-control, .form-select).single .ts-control {
+    background-image: dropdown-arrow-svg(#999) !important;
+}
+
 #compiler-picker-modal {
     .architecture,
     .compiler-type {

static/styles/themes/pink-theme.scss

@@ -654,12 +654,9 @@ textarea.form-control {
     .ts-control {
         border: none;
         color: #343a40 !important;
-        background: $base !important;
+        background-color: $base !important;
         text-shadow: none !important;
 
-        &:after {
-            border-color: #343a40 transparent transparent transparent;
-        }
 
         //&.disabled {
         //    color: #f2f2f2 !important;

views/font-size.pug

@@ -1,4 +1,4 @@
 .btn-group.btn-group-sm(role="group" aria-label="Font size")
   button.dropdown-toggle.btn.btn-light.fs-button(type="button" title="Change font size\nTip #1: You can use scroll wheel while hovering over this button\nTip #2: You can ctrl+click this button to reset to default" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-bs-flip="false" data-bs-boundary="viewport")
-    span.fa.fa-font #[b.caret]
+    span.fa.fa-font
   .dropdown-menu.font-size-list(aria-labelledby="fs-button")