From 7d4555f25208cf64518f43999f1a3cef8e846cf7 Mon Sep 17 00:00:00 2001 From: Matt Godbolt Date: Mon, 9 Jun 2025 11:00:11 -0500 Subject: [PATCH] Fix dropdown menus showing double arrows (#7765) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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 `` 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 --- static/styles/explorer.scss | 28 ++++++------------------ static/styles/themes/dark-theme.scss | 11 +++++----- static/styles/themes/one-dark-theme.scss | 11 +++++----- static/styles/themes/pink-theme.scss | 5 +---- views/font-size.pug | 2 +- 5 files changed, 21 insertions(+), 36 deletions(-) diff --git a/static/styles/explorer.scss b/static/styles/explorer.scss index 93389df62..dda6d05bf 100644 --- a/static/styles/explorer.scss +++ b/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,"); +} + /* * 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 diff --git a/static/styles/themes/dark-theme.scss b/static/styles/themes/dark-theme.scss index eddba737e..a433bdd46 100644 --- a/static/styles/themes/dark-theme.scss +++ b/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 { diff --git a/static/styles/themes/one-dark-theme.scss b/static/styles/themes/one-dark-theme.scss index 148198c50..131c9c7f0 100644 --- a/static/styles/themes/one-dark-theme.scss +++ b/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 { diff --git a/static/styles/themes/pink-theme.scss b/static/styles/themes/pink-theme.scss index 427dd5909..bc159b6b9 100644 --- a/static/styles/themes/pink-theme.scss +++ b/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; diff --git a/views/font-size.pug b/views/font-size.pug index e8eac11da..f4b843cf3 100644 --- a/views/font-size.pug +++ b/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")