mirror of
https://github.com/compiler-explorer/compiler-explorer.git
synced 2025-12-27 10:33:59 -05:00
7d4555f252
## 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>
5 lines
475 B
Plaintext
5 lines
475 B
Plaintext
.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
|
|
.dropdown-menu.font-size-list(aria-labelledby="fs-button")
|